1

Estoy intentando hacer un juego para una promoción. Me pasaron una ruleta hecha con JavaScript y mi idea es modificarla. En el código actual cuando el usuario hace click la ruleta arroja un resultado en un <h1> . Lo que quisiera es modificar ese código así me devuelve un <a> al que además le pueda incluir un href que me envíe a diferentes links dependiendo del descuento que les toca. Pero no encuentro como están imprimiendo ese <h1> y cómo modificarlo para que sea un <a> y además pasarle la data de la URL al href dependiendo del descuento. Adjunto el código actual

<html>
<head></head>
<body>

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

<div id="question">
   <button id="btn"><h1 id="h1"></h1></button>
</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" },
        { "label": "35% off", "value": 1, "question": "You win 35% off" },
        { "label": "40% off", "value": 1, "question": "You win 40% off" },
        { "label": "30% off", "value": 1, "question": "You win 30% off" },
        { "label": "35% off", "value": 1, "question": "You win 35% off" },
        { "label": "40% off", "value": 1, "question": "You win 40% off" },
        { "label": "30% off", "value": 1, "question": "You win 30% off" },
        { "label": "35% off", "value": 1, "question": "You win 35% off" },
        { "label": "40% off", "value": 1, "question": "You win 40% off" },
        { "label": "30% off", "value": 1, "question": "You win 30% off" }
        ];

    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 spin(d) {

        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 h1")

                    .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>
</body>
</html>
1
  • 1
    justo al final de la animación hay un d3.select("#question h1") debajo del comentario //populate question ( rellenar pregunta ) Commented el 18 nov. 2020 a las 19:33

1 respuesta 1

3

El h1 que buscas está aquí:

<div id="question">
   <button id="btn"><h1 id="h1"></h1></button>
</div>

El código que le agrega el texto es este:

d3.select("#question h1").text(data[picked].question);

Si se quiere cambiari el <h1> por un <a> quedaría así:

 <button id="btn">
   <a href=""></a>
   </button>

Para agregar el texto y el enlace:

d3.select("#question a")
.attr("href",data[picked].ref)
.text(data[picked].question);

Y en cada objeto del arreglo data agregar la propiedad ref que contenga la url para ese descuento:

{ "label": "30% off", "value": 1, "question": "You win 30% off" , ref : "https://www.google.com.sv"},

Código modificado:

<html>
<head></head>
<body>

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

<div id="question">
   <button id="btn">
   <a href=""></a>
   </button>
  
</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.sv"},
        { "label": "35% off", "value": 1, "question": "You win 35% off", ref : "https://www.google.com.sv" },
        { "label": "40% off", "value": 1, "question": "You win 40% off" , ref : "https://www.google.com.sv"},
        { "label": "30% off", "value": 1, "question": "You win 30% off" , ref : "https://www.google.com.sv"},
        { "label": "35% off", "value": 1, "question": "You win 35% off" , ref : "https://www.google.com.sv"},
        { "label": "40% off", "value": 1, "question": "You win 40% off" , ref : "https://www.google.com.sv"},
        { "label": "30% off", "value": 1, "question": "You win 30% off" , ref : "https://www.google.com.sv"},
        { "label": "35% off", "value": 1, "question": "You win 35% off" , ref : "https://www.google.com.sv"},
        { "label": "40% off", "value": 1, "question": "You win 40% off" , ref : "https://www.google.com.sv"},
        { "label": "30% off", "value": 1, "question": "You win 30% off" , ref : "https://www.google.com.sv"}
        ];

    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 spin(d) {

        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)
                    .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>
</body>
</html>

2
  • Hola, sabrías como hacer para modificar el SVG. Porque mi colega tiene esto unbounce. Y no es responsive para nada. Al menos como hacerlo funcionar con un 250x250px para mobile
    – Daro
    Commented el 19 nov. 2020 a las 9:45
  • Lo siento, con eso te quedo mal, no se me ocurre como hacerlo.
    – Lobos
    Commented el 20 nov. 2020 a las 4:20

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.