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>
