d3.js 在JavaScript中更改为链接

nqwrtyyt  于 2023-10-19  发布在  Java
关注(0)|答案(1)|浏览(91)

我已经寻找周围,并给予了诚实的努力,为过去几天(整天),我似乎不能得到它的权利,所以我把它放回至少能够显示点击这里的车轮。例如,点击这里可以到达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>
c9qzyr3d

c9qzyr3d1#

我为你找到了解决办法。您在写入变量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>"不要在双引号内使用双引号,因为它会引起问题。你可以在引号2中使用引号1。
如果你想html不要用途:

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

你应该使用

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

相关问题