d3 update没有生效

发布于 2022-09-03 07:32:41 字数 1143 浏览 13 评论 0

  1. 根据官方文档,对节点绑定数据的时候,会更新原有节点;但是我发现在加了enter方法之后,就没有更新节点的效果了,这是为什么,html代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
    <style>
        .chart div {
          font: 10px sans-serif;
          background-color: steelblue;
          text-align: right;
          padding: 3px;
          margin: 1px;
          color: white;
        }
    </style>
</head>
<body>
    <div class="chart">    
        <div></div>
    </div>
    <script type="text/javascript">
        var data = [4, 8, 15, 16, 23, 42];
        var barUpdate = d3.select(".chart")
                          .selectAll("div")
                          .data(data);
        var barEnter = barUpdate.enter().append("div");
        barEnter.style("width",function(d){
            return d*10+"px";
        });
        barEnter.text(function(d){return d;});
    </script>
</body>
</html>

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文