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>
viewbox
. Como.attr("viewBox", "0 0 500 500")
. El valor del atributoviewBox
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.