我已经寻找周围,并给予了诚实的努力,为过去几天(整天),我似乎不能得到它的权利,所以我把它放回至少能够显示点击这里的车轮。例如,点击这里可以到达peredy1.com等。我尝试了所有我能找到的例子,但都没有运气(a.href,a href=”“等)
我需要做的是,当轮子停止时,它会显示一个可点击的链接,用于获胜的选择。我没有写这个,但我定制了它。任何帮助将不胜感激。
这是有问题的部分
var data = [
{"label":"2 Songs", "value":1, "question":"<a href="https://www.peredy1.com">CLICK HERE</a>"}, // padding
{"label":"1 Song", "value":1, "question":"CLICK HERE"}, //font-family
{"label":"2 Songs", "value":1, "question":"CLICK HERE"}, //color
{"label":"1 Song", "value":1, "question":"CLICK HERE"}, //font-weight
{"label":"1 Song", "value":1, "question":"CLICK HERE"}, //font-size
{"label":"1 Song", "value":1, "question":"CLICK HERE"}, //background-color
{"label":"3 Songs", "value":1, "question":"CLICK HERE"}, //nesting
{"label":"1 Song", "value":1, "question":"CLICK HERE"}, //bottom
{"label":"2 Songs", "value":1, "question":"CLICK HERE"}, //sans-serif
{"label":"1 Song", "value":1, "question":"CLICK HERE"} //period
];
这是整个页面…
var padding = {
top: 20,
right: 40,
bottom: 0,
left: 0
},
w = 500 - padding.left - padding.right,
h = 500 - padding.top - padding.bottom,
r = Math.min(w, h) / 2,
rotation = 3,
oldrotation = 0,
picked = 100000,
oldpick = [],
color = d3.scale.category20();
var data = [{
"label": "2 Songs",
"value": 1,
"question": "<a href="
https: //www.peredy1.com">CLICK HERE</a>"}, // padding
{
"label": "1 Song",
"value": 1,
"question": "CLICK HERE"
}, //font-family
{
"label": "2 Songs",
"value": 1,
"question": "CLICK HERE"
}, //color
{
"label": "1 Song",
"value": 1,
"question": "CLICK HERE"
}, //font-weight
{
"label": "1 Song",
"value": 1,
"question": "CLICK HERE"
}, //font-size
{
"label": "1 Song",
"value": 1,
"question": "CLICK HERE"
}, //background-color
{
"label": "3 Songs",
"value": 1,
"question": "CLICK HERE"
}, //nesting
{
"label": "1 Song",
"value": 1,
"question": "CLICK HERE"
}, //bottom
{
"label": "2 Songs",
"value": 1,
"question": "CLICK HERE"
}, //sans-serif
{
"label": "1 Song",
"value": 1,
"question": "CLICK HERE"
} //period
];
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 - 10) + ")";
})
.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(3000)
.attrTween("transform", rotTween)
.each("end", function() {
//mark question as seen
d3.select(".slice:nth-child(" + (picked + 1) + ") path")
.attr("fill", "#111");
//populate question
d3.select("#question h1")
.text(data[picked].question);
oldrotation = rotation;
container.on("click", spin);
});
}
//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": "black"
});
//draw spin circle
container.append("circle")
.attr("cx", 0)
.attr("cy", 0)
.attr("r", 60)
.style({
"fill": "white",
"cursor": "pointer"
});
//spin text
container.append("text")
.attr("x", 0)
.attr("y", 15)
.attr("text-anchor", "middle")
.text("SPIN")
.style({
"font-weight": "bold",
"font-size": "30px"
});
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;
}
text {
font-family: Helvetica, Arial, sans-serif;
font-size: 39px;
font-weight: bold;
pointer-events: none;
}
#chart {
position: absolute;
width: 500px;
height: 500px;
top: 0;
left: 0;
}
#question {
position: absolute;
width: 400px;
height: 500px;
top: 0;
left: 520px;
padding: 5;
margin: 5;
}
#question h1 {
font-size: 50px;
font-weight: bold;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
position: absolute;
padding: 0;
margin: 0;
top: 50%;
-webkit-transform: translate(0, -50%);
transform: translate(0, -50%);
}
<div id="chart"></div>
<div id="question">
<h1></h1>
</div>
<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
1条答案
按热度按时间c9qzyr3d1#
我为你找到了解决办法。您在写入变量
data
时出错:关于写作问题应该是
"<a href='https://www.peredy1.com'>CLICK HERE</a>"
不要在双引号内使用双引号,因为它会引起问题。你可以在引号2中使用引号1。如果你想html不要用途:
你应该使用