更改為Javascript中的鏈接-有解無憂

在過去的幾天里（一整天），我四處搜索并付出了誠實的努力，但我似乎無法做到正確，所以我把它放回去至少能夠在方向盤上顯示“點擊這里”。例如，單擊此處可以訪問 peredy1.com 等。我嘗試了所有我能找到的示例，但都沒有運氣（a.href、a href=" "等）

你可以看到我在這方面嘗試過的一種方式。另外，請在給我 -1 之前告訴我原因。在此處尋求幫助時，我似乎無法理解我在問題中做錯了什么。

我需要做的是，當滾輪停止時，它會顯示該獲勝選擇的可點擊鏈接。我沒有寫這個，但我定制了它。任何幫助將不勝感激。

這是有問題的部分

 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
                
    ];

這是整個頁面...

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>

uj5u.com熱心網友回復：

我為您找到了解決方案。您在寫入變數時出錯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
];

在寫問題時應該"<a href='https://www.peredy1.com'>CLICK HERE</a>"不要在雙引號內使用雙引號，因為它會引起問題。您可以在參考二中使用參考一。

如果你想 html 不要使用：

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

你應該使用

//populate question
d3.select("#question h1")
    .html(data[picked].question);

轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/325995.html

標籤：javascript html d3.js

上一篇：路徑和圖形元素未顯示在D3中

下一篇：D3將承諾資料讀入建構式