0

Estoy usando esta rueda para una promoción. He logrado modificar ciertas cosas del código para que despliegue lo que necesito en términos de datos y la "vista Desktop".

Pero tengo un problema que no estoy pudiendo solucionar que es como hacer que el SVG que se carga sea mas pequeño para mobile.

Modificar simplemente las medidas del DIV no funciona o quizás es porque está en una plataforma para hacer landing pages y es mucho de Drag and Drop y modifica los estilos globales.

Pero sacando eso de la ecuación, como podría modificar el SVG para que en mobile tuviera unas dimensiones de 200px x 200px.

<div id="chart"></div>

<div id="question">
  <a id="btnResult"></a>
</div>

<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
  var padding = {
      top: 20,
      right: 20,
      bottom: 20,
      left: 20
    },
    w = 500 - padding.left - padding.right,
    h = 500 - padding.top - padding.bottom,
    r = Math.min(w, h) / 2,
    rotation = 0,
    oldrotation = 0,
    picked = 100000,
    oldpick = [],
    color = d3.scale.category20b(); //category20c()
  //randomNumbers = getRandomNumbers();

  var data = [{
      "label": "30% off",
      "value": 1,
      "question": "You win 30% off",
      ref: "https://www.google.com"
    },
    {
      "label": "35% off",
      "value": 1,
      "question": "You win 35% off",
      ref: "https://www.google.com"
    },
    {
      "label": "40% off",
      "value": 1,
      "question": "You win 40% off",
      ref: "https://www.google.com"
    },
    {
      "label": "30% off",
      "value": 1,
      "question": "You win 30% off",
      ref: "https://www.google.com"
    },
    {
      "label": "35% off",
      "value": 1,
      "question": "You win 35% off",
      ref: "https://www.google.com"
    },
    {
      "label": "40% off",
      "value": 1,
      "question": "You win 40% off",
      ref: "https://www.google.com"
    },
    {
      "label": "30% off",
      "value": 1,
      "question": "You win 30% off",
      ref: "https://www.google.com"
    },
    {
      "label": "35% off",
      "value": 1,
      "question": "You win 35% off",
      ref: "https://www.google.com"
    },
    {
      "label": "40% off",
      "value": 1,
      "question": "You win 40% off",
      ref: "https://www.google.com"
    },
    {
      "label": "30% off",
      "value": 1,
      "question": "You win 30% off",
      ref: "https://www.google.com"
    }
  ];

  var svg = d3.select('#chart')

    .append("svg")
    .data([data])
    .attr("width", w + padding.left + padding.right)
    .attr("height", h + padding.top + padding.bottom);

  var container = svg.append("g").attr("class", "chartholder").attr("transform", "translate(" + (w / 2 + padding.left) + "," + (h / 2 + padding.top) + ")");

  var vis = container.append("g");

  var pie = d3.layout.pie().sort(null).value(function(d) {
    return 1;
  });

  // declare an arc generator function
  var arc = d3.svg.arc().outerRadius(r);

  // select paths, use arc generator to draw
  var arcs = vis.selectAll("g.slice")
    .data(pie)
    .enter()
    .append("g")
    .attr("class", "slice");

  arcs.append("path")
    .attr("fill", function(d, i) {
      return color(i);
    })
    .attr("d", function(d) {
      return arc(d);
    });

  // add the text
  arcs.append("text").attr("transform", function(d) {
      d.innerRadius = 0;
      d.outerRadius = r;
      d.angle = (d.startAngle + d.endAngle) / 2;

      return "rotate(" + (d.angle * 180 / Math.PI - 90) + ")translate(" + (d.outerRadius - 20) + ")";

    })
    .attr("text-anchor", "end")
    .text(function(d, i) {
      return data[i].label;
    });

  container.on("click", spin);


  // function clickEnElCirculo() {
  //     setTimeout(function () { 
  //         var userResult = document.getElementById('h1')
  //         var btn = document.getElementById('btnResult')
  //         btn.style.display = "block"
  //         btn.innerHTML = userResult.innerHTML
  //         console.log(userResult.innerHTML)
  //         }, 6000);
  //         console.log("Click en el circulo")
  //     }

  function spin(d) {

    // clickEnElCirculo()
    container.on("click", null);

    //all slices have been seen, all done
    console.log("OldPick: " + oldpick.length, "Data length: " + data.length);

    if (oldpick.length == data.length) {

      console.log("done");
      container.on("click", null);
      return;
    }

    var ps = 360 / data.length,
      pieslice = Math.round(1440 / data.length),
      rng = Math.floor((Math.random() * 1440) + 360);

    rotation = (Math.round(rng / ps) * ps);
    picked = Math.round(data.length - (rotation % 360) / ps);
    picked = picked >= data.length ? (picked % data.length) : picked;

    if (oldpick.indexOf(picked) !== -1) {
      d3.select(this).call(spin);
      return;

    } else {
      oldpick.push(picked);
    }

    rotation += 90 - Math.round(ps / 2);

    vis.transition()
      .duration(5000)
      .attrTween("transform", rotTween)
      .each("end", function() {

        //mark question as seen
        d3.select(".slice:nth-child(" + (picked + 1) + ") path")
          .attr("fill", "#98278f");

        //populate question
        d3.select("#question a")
          .attr({
            "href": data[picked].ref,
            "style": "text-decoration: none; background-color: blue; color: #ffffff; padding: 0.5em 1em; border-radius: 10px;"
          })
          .text(data[picked].question);

        oldrotation = rotation;
      });
  }

  //make arrow

  svg.append("g")
    .attr("transform", "translate(" + (w + padding.left + padding.right) + "," + ((h / 2) + padding.top) + ")")
    .append("path")
    .attr("d", "M-" + (r * .15) + ",0L0," + (r * .05) + "L0,-" + (r * .05) + "Z")
    .style({
      "fill": "#efefef"
    });

  //draw spin circle
  container.append("circle").attr("cx", 0).attr("cy", 0).attr("r", 60).style({
    "fill": "#98278f",
    "cursor": "pointer"
  });

  //spin text
  container.append("text").attr("x", 0).attr("y", 10).attr("text-anchor", "middle").text("SPIN NOW").style({
    "font-weight": "bold",
    "font-size": "20px",
    "fill": "white",
    "cursor": "pointer"
  });

  function rotTween(to) {
    var i = d3.interpolate(oldrotation % 360, rotation);
    return function(t) {
      return "rotate(" + i(t) + ")";
    };
  }

  function getRandomNumbers() {

    var array = new Uint16Array(1000);
    var scale = d3.scale.linear().range([360, 1440]).domain([0, 100000]);

    if (window.hasOwnProperty("crypto") && typeof window.crypto.getRandomValues === "function") {
      window.crypto.getRandomValues(array);
      console.log("works");
    } else {

      //no support for crypto, get crappy random numbers
      for (var i = 0; i < 1000; i++) {
        array[i] = Math.floor(Math.random() * 100000) + 1;
      }
    }
    return array;
  }
</script>

1
  • 1
    Puedes usar viewbox. Como .attr("viewBox", "0 0 500 500"). El valor del atributo viewBox es una lista de cuatro números: min-x, min-y, anchura y altura. No modifica el SVG a los dimensiones de 200px x 200px, pero hace que el SVG sea escalable.
    – milmal
    Commented el 19 nov. 2020 a las 15:29

1 respuesta 1

0

En el código he comentado

//.attr("width", w + padding.left + padding.right)
//.attr("height", h + padding.top + padding.bottom);

y he añadido esta línea de código:

.attr("viewBox",`${-padding.left} ${-padding.top} ${w + padding.left + padding.right} ${h + padding.top + padding.bottom}`);

Esto añade un atributo viewBox. La sintaxis del atributo viewBox es:

viewBox = "desdeX desdeY anchura altura"

Ahora el elemento svg toma por defecto toda la anchura disponible: en este caso 100vw. La altura será calculada guardando el aspecto de razón inicial.

svg{border:solid;width:50vw}
<div id="chart"></div>

<div id="question">
  <a id="btnResult"></a>
</div>

<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
  var padding = {
      top: 20,
      right: 20,
      bottom: 20,
      left: 20
    },
    w = 460,
    h = 460,
    r = Math.min(w, h) / 2,
    rotation = 0,
    oldrotation = 0,
    picked = 100000,
    oldpick = [],
    color = d3.scale.category20b(); 
    
  var data = [{
      "label": "30% off",
      "value": 1,
      "question": "You win 30% off",
      ref: "https://www.google.com"
    },
    {
      "label": "35% off",
      "value": 1,
      "question": "You win 35% off",
      ref: "https://www.google.com"
    },
    {
      "label": "40% off",
      "value": 1,
      "question": "You win 40% off",
      ref: "https://www.google.com"
    },
    {
      "label": "30% off",
      "value": 1,
      "question": "You win 30% off",
      ref: "https://www.google.com"
    },
    {
      "label": "35% off",
      "value": 1,
      "question": "You win 35% off",
      ref: "https://www.google.com"
    },
    {
      "label": "40% off",
      "value": 1,
      "question": "You win 40% off",
      ref: "https://www.google.com"
    },
    {
      "label": "30% off",
      "value": 1,
      "question": "You win 30% off",
      ref: "https://www.google.com"
    },
    {
      "label": "35% off",
      "value": 1,
      "question": "You win 35% off",
      ref: "https://www.google.com"
    },
    {
      "label": "40% off",
      "value": 1,
      "question": "You win 40% off",
      ref: "https://www.google.com"
    },
    {
      "label": "30% off",
      "value": 1,
      "question": "You win 30% off",
      ref: "https://www.google.com"
    }
  ];

  var svg = d3.select('#chart')

    .append("svg")
    .data([data])
    
    // cambiado!!!-->
    .attr("viewBox",`${-padding.left} ${-padding.top} ${w + padding.left + padding.right} ${h + padding.top + padding.bottom}`);
    //.attr("width", w + padding.left + padding.right)
    //.attr("height", h + padding.top + padding.bottom);

  var container = svg.append("g").attr("class", "chartholder").attr("transform", "translate(" + w/2 +"," + h / 2 + ")");
    //<-- cambiado!!!

  var vis = container.append("g");

  var pie = d3.layout.pie().sort(null).value(function(d) {
    return 1;
  });

  // declare an arc generator function
  var arc = d3.svg.arc().outerRadius(r);

  // select paths, use arc generator to draw
  var arcs = vis.selectAll("g.slice")
    .data(pie)
    .enter()
    .append("g")
    .attr("class", "slice");

  arcs.append("path")
    .attr("fill", function(d, i) {
      return color(i);
    })
    .attr("d", function(d) {
      return arc(d);
    });

  // add the text
  arcs.append("text").attr("transform", function(d) {
      d.innerRadius = 0;
      d.outerRadius = r;
      d.angle = (d.startAngle + d.endAngle) / 2;

      return "rotate(" + (d.angle * 180 / Math.PI - 90) + ")translate(" + (d.outerRadius - 20) + ")";

    })
    .attr("text-anchor", "end")
    .text(function(d, i) {
      return data[i].label;
    });

  container.on("click", spin);


  // function clickEnElCirculo() {
  //     setTimeout(function () { 
  //         var userResult = document.getElementById('h1')
  //         var btn = document.getElementById('btnResult')
  //         btn.style.display = "block"
  //         btn.innerHTML = userResult.innerHTML
  //         console.log(userResult.innerHTML)
  //         }, 6000);
  //         console.log("Click en el circulo")
  //     }

  function spin(d) {

    // clickEnElCirculo()
    container.on("click", null);

    //all slices have been seen, all done
    console.log("OldPick: " + oldpick.length, "Data length: " + data.length);

    if (oldpick.length == data.length) {

      console.log("done");
      container.on("click", null);
      return;
    }

    var ps = 360 / data.length,
      pieslice = Math.round(1440 / data.length),
      rng = Math.floor((Math.random() * 1440) + 360);

    rotation = (Math.round(rng / ps) * ps);
    picked = Math.round(data.length - (rotation % 360) / ps);
    picked = picked >= data.length ? (picked % data.length) : picked;

    if (oldpick.indexOf(picked) !== -1) {
      d3.select(this).call(spin);
      return;

    } else {
      oldpick.push(picked);
    }

    rotation += 90 - Math.round(ps / 2);

    vis.transition()
      .duration(5000)
      .attrTween("transform", rotTween)
      .each("end", function() {

        //mark question as seen
        d3.select(".slice:nth-child(" + (picked + 1) + ") path")
          .attr("fill", "#98278f");

        //populate question
        d3.select("#question a")
          .attr({
            "href": data[picked].ref,
            "style": "text-decoration: none; background-color: blue; color: #ffffff; padding: 0.5em 1em; border-radius: 10px;"
          })
          .text(data[picked].question);

        oldrotation = rotation;
      });
  }

  //make arrow

  svg.append("g")
    .attr("transform", "translate(" + (w + padding.left + padding.right) + "," + ((h / 2) + padding.top) + ")")
    .append("path")
    .attr("d", "M-" + (r * .15) + ",0L0," + (r * .05) + "L0,-" + (r * .05) + "Z")
    .style({
      "fill": "#efefef"
    });

  //draw spin circle
  container.append("circle").attr("cx", 0).attr("cy", 0).attr("r", 60).style({
    "fill": "#98278f",
    "cursor": "pointer"
  });

  //spin text
  container.append("text").attr("x", 0).attr("y", 10).attr("text-anchor", "middle").text("SPIN NOW").style({
    "font-weight": "bold",
    "font-size": "20px",
    "fill": "white",
    "cursor": "pointer"
  });

  function rotTween(to) {
    var i = d3.interpolate(oldrotation % 360, rotation);
    return function(t) {
      return "rotate(" + i(t) + ")";
    };
  }

  function getRandomNumbers() {

    var array = new Uint16Array(1000);
    var scale = d3.scale.linear().range([360, 1440]).domain([0, 100000]);

    if (window.hasOwnProperty("crypto") && typeof window.crypto.getRandomValues === "function") {
      window.crypto.getRandomValues(array);
      console.log("works");
    } else {

      //no support for crypto, get crappy random numbers
      for (var i = 0; i < 1000; i++) {
        array[i] = Math.floor(Math.random() * 100000) + 1;
      }
    }
    return array;
  }
</script>

Si quieres que el elemento svg sea más pequeño siguiendo siendo responsive podrías probar algo cómo

svg{
  width:50vw;
  min-width:700px;
}

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.