Question

我正在玩d3.js版本3（对不起，它不是4.）并且对它的嵌套选择感到困惑。

在下面的代码中我打算动画3深度二进制树的单元格包含当前时间：

<!doctype html>
<html>
  <head>
    <script src="http://d3js.org/d3.v3.min.js"></script>
  </head>
  <body>

    <script>
      function f(){
        var ps0 = d3.select("body");

        var ps1 = ps0.selectAll("div").data([new Date(), new Date()]);
        ps1.enter().append("div").style("background", "red");
        ps1.text(function (x){return "red " + x;});
        ps1.exit().remove();

        var ps2 = ps1.selectAll("div").data([new Date(), new Date()]);
        ps2.enter().append("div").style("background", "green");
        ps2.text(function (x){return "green " + x;});
        ps2.exit().remove();

        var ps3 = ps2.selectAll("div").data([new Date(), new Date()]);
        ps3.enter().append("div").style("background", "blue");
        ps3.text(function (x){return "blue " + x;});
        ps3.exit().remove();
      }

      setInterval("f()", 1000);
    </script>
  </body>
</html>

在第一次通话时，它完全按照我想要的方式绘制：2个红色，4个绿色和8个蓝色单元格。但是从第二次调用开始，它只画出了前半部分而后者被删除了。

我想我误解了d3的嵌套选择，但仍然无法找出它为何如此工作以及如何修复它。任何帮助表示赞赏！

Answer 1

执行此操作时：

var ps1 = ps0.selectAll("div")...
var ps2 = ps1.selectAll("div")...
var ps3 = ps2.selectAll("div")...

您正在选择预先存在的 div，并将数据绑定到它们。那不是你想要的。

解决方案：对于每个选择，仅选择属于该选择的div。一种简单的方法是按类设置和选择：

var ps1 = ps0.selectAll(".ps1")
    //select by class -----^
    .data([new Date(), new Date()]);

ps1.enter().append("div")
    .style("background", "red")
    .attr("class", "ps1");
    //set the class --^

这是您更新的代码：

＆＃13;

function f() {
  var ps0 = d3.select("body");

  var ps1 = ps0.selectAll(".ps1").data([new Date(), new Date()]);
  ps1.enter().append("div").style("background", "red").attr("class", "ps1");
  ps1.text(function(x) {
    return "red " + x;
  });
  ps1.exit().remove();

  var ps2 = ps1.selectAll(".ps2").data([new Date(), new Date()]);
  ps2.enter().append("div").style("background", "green").attr("class", "ps2");
  ps2.text(function(x) {
    return "green " + x;
  });
  ps2.exit().remove();

  var ps3 = ps2.selectAll(".ps3").data([new Date(), new Date()]);
  ps3.enter().append("div").style("background", "blue").attr("class", "ps3");
  ps3.text(function(x) {
    return "blue " + x;
  });
  ps3.exit().remove();
}

setInterval(f, 1000);

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

＆＃13;

对选择d3.js版本3感到困惑

1 个答案: