I have searched around and gave an honest effort for the last few days (all day) and I can't seem to get it right so I put it back to at least be able to show the CLICK HERE in the wheel. For example, the CLICK HERE could get to peredy1.com, etc. I tried all the examples I could find with no luck (a.href, a href=" ", etc)
You can see one way I tried in this. Also, please before giving me a -1 tell me why. I can't seem to understand what I'm doing wrong in my question when asking for assistance here.
What I need to do, is when the wheel stops it shows a clickable link for that winning selection. I did not write this but I customized it. Any help would be greatly appreciated.
Here is the section in question
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
];
Here is the whole page...
enter code here
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Randomizer Wheel</title>
<style type="text/css">
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%);
}
</style>
</head>
<body>
<div id="chart"></div>
<div id="question">
<h1></h1>
</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: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();//category20c()
//randomNumbers = getRandomNumbers();
//http://osric.com/bingo-card-generator/?title=HTML and CSS BINGO!&words=padding,font-family,color,font-weight,font-size,background-color,nesting,bottom,sans-serif,period,pound sign,﹤body﹥,﹤ul﹥,﹤h1﹥,margin,< >,{ },﹤p﹥,﹤!DOCTYPE html﹥,﹤head﹥,colon,﹤style﹥,.html,HTML,CSS,JavaScript,border&freespace=true&freespaceValue=Web Design Master&freespaceRandom=false&width=5&height=5&number=35#results
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;
}
</script>
</body>
</html>
CodePudding user response：
I found the solution for you. You made an error writing the variable data:
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
];
on writing question should be "<a href='https://www.peredy1.com'>CLICK HERE</a>" do not use double quotes inside double quotes, because it can cause problems. You can use quote one inside quote two.
If you want to html don't use:
//populate question
d3.select("#question h1")
.text(data[picked].question);
you should use
//populate question
d3.select("#question h1")
.html(data[picked].question);