Question

我正在修改Mike Bostock的一般更新模式III块，并且很难理解为什么，虽然输入和退出值显示，但更新值不是。我已经读过，分配特定值而不是使用数据数组值将有助于，如同一个键，但这不起作用。如何修改此值，以便输入值显示其填充样式，红色？我已阅读SO帖子并重新阅读“如何选择工作”但仍然无法使其发挥作用。

以下是代码：

<!DOCTYPE html>
<meta charset="utf-8">
<style>
  text {
    font: bold 28px monospace;
  }

  .enter {
    fill: green;
  }

  .update {

    fill: red;
  }

  .exit {

    fill: blue;
  }
</style>

<body>
  <script src="../d3.v3.js"></script>
  <script>
    function randomData() {
      return Math.floor(Math.random() * 200);
    }


    var the_values = [];

    function randomEntry() {
      var numlist = [];

      var randomEntry;
      var maximum,minimum;
      maximum = 10; minimum = 1
      var random_in_range = Math.floor(Math.random() * (maximum - minimum + 1)) + minimum;
      var length_of_array = random_in_range;
      console.log("length_of_array", length_of_array);

      for (i = 0; i < length_of_array; i++) {

        numlist.push([randomData(), randomData()]);
      }
      return numlist;
    }
    the_values = randomEntry();
    console.log("the_values", the_values);


    var width = 360,
      height = 400;

    var svg = d3.select("body").append("svg")
      .attr("width", width)
      .attr("height", height)
      .append("g")
      .attr("transform", "translate(32," + (height / 2) + ")");

    function update(data) {

      // DATA JOIN
      // Join new data with old elements, if any.
      var text = svg.selectAll("text")
        .data(data, function(d) {
          return d;
        })
      .attr("transform", "translate(20," + (30) + ")");

       var circles = svg.selectAll("circle")
        .data(data, function(d) {
          return d;
         })
      .attr("transform", "translate(20," + (30) + ")");

      // UPDATE
      // Update old elements as needed.
      circles.attr("class", "update")
        .transition()
        .duration(750)
        .attr("opacity", 0.3)
        .attr("cx", function(d, i) {
         return d[0];
        })
        .attr("cy", function(d, i) {
         return d[1];
        })

      text.attr("class", "update")
        .transition()
        .duration(750)
        .attr("x", function(d, i) {
         return d[0];
       })
        .attr("y", function(d, i) {
          return d[1];
        })


      // ENTER
      // Create new elements as needed.
      circles.enter().append("circle")
        .attr("class", "enter")
        .attr("opacity", 0.3)
        .attr("r", 25)
        .attr("cx", function(d, i) {
          return d[0];
        })
         .attr("cy", function(d, i) {
          return d[1];
         })
         .style("fill-opacity", 1e-6)

      .transition()
        .duration(750)
        .attr("r", 30)
        .style("fill-opacity", 1);


      text.enter().append("text")
        .attr("class", "enter")
        .attr("dy", ".25em")
        .attr("x", function(d) {
          return d[0];
        })
        .attr("y", function(d) {
          return d[1];
         })
         .style("fill-opacity", 1e-6)
         .text(function(d) {
          return d[0];
         })
         .transition()
        .duration(750)
        .style("fill-opacity", 1);


      // EXIT
       // Remove old elements as needed.
      text.exit()
        .attr("class", "exit")
        .transition()
        .duration(750)
        .attr("y", 60)
         .style("fill-opacity", 1e-6)
         .remove();

      circles.exit()
        .attr("class", "exit")
        .transition()
        .duration(750)

      .style("fill-opacity", 1e-6)
       .remove();
    }

    // The initial display.
    update(the_values);

    // Grab a random sample of letters from the alphabet, in alphabetical     order.
    setInterval(function() {
     update(randomEntry());
    }, 1500);
  </script>

Answer 1

从快速浏览一下代码，它似乎正在做你想要的。您的输入圆圈实际上是绿色的，所以您实际上看到了这些。更新被更改为红色，但您没有看到很多更新，因为您从1-200中选择了一些随机数。您不太可能在更新选择中得到任何结果，因为这意味着您连续两次选择相同的数字。

要查看某些更新圈子，请更改：

return Math.floor(Math.random() * 200);

要：

return Math.floor(Math.random() * 10);

这会让位置失效，但你很快就会看到一些红色圆圈。

Answer 2

原因是在更新功能中，您总是在更改整个输入数组。

你在做：

setInterval(function() {
 update(randomEntry());//this will change the full array set
}, 1500);

这应该是：

setInterval(function() {
  the_values.forEach(function(d){
    //change the data set for update
  }) 
 update(the_values);
}, 1500);

请注意上面我没有创建新数组，但是我传递的是同一个数组，并更改了更新功能。

工作小提琴here

希望这有帮助！

一般更新模式III，更新值未显示

2 个答案: