个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-12-01 03:38:03 25 4
gpt4 key购买 nike

我正在使用 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 嵌套选择的一些内容，但仍然无法找出它为什么这样工作以及如何修复它。如有任何帮助，我们将不胜感激!

最佳答案

当你这样做时:

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

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

解决方案:对于每个选择，仅选择属于该选择的 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>

关于javascript - 对 d3.js 版本 3 的选择感到困惑，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44105474/

25 4 0
文章推荐： jquery - PhoneGap 应用程序中使用 jQuery 进行 Material 设计(聚合物)
文章推荐： python - 将字段从一种模型继承到另一种模型 - Odoo v9 社区
文章推荐： jquery - 当用户在文本框中输入超过 5 个字符时执行函数
文章推荐： Python 扰码器程序
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com