文章/答案/技术大牛

发布

社区首页 >问答首页 >与d3.js版本3的选择混淆

问与d3.js版本3的选择混淆
EN

Stack Overflow用户

提问于 2017-05-22 05:50:35

回答 1查看 57关注 0票数 0

我正在玩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嵌套选择的一些东西，但仍然找不出它为什么会这样工作，以及如何修复它。任何帮助都是非常感谢的！

javascript

d3.js

回答 1

Stack Overflow用户

回答已采纳

发布于 2017-05-22 06:44:10

当你这样做时：

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 --^

以下是您更新的代码：

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

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

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/44105474

复制

相似问题

问与d3.js版本3的选择混淆
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问与d3.js版本3的选择混淆EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问与d3.js版本3的选择混淆
EN