d3.js 在就绪文档上访问 DOM

d3.js accessing the DOM on ready document

本文关键字：访问 DOM 文档 就绪 js d3      更新时间：2023-09-26

我是 d3 的新手，在我的可视化加载到页面上后，无法从 DOM 访问元素。我正在尝试更改矩形元素的属性，但由于我不明白的原因，我只能在浏览器的 js 控制台中执行此操作，而不是在带有脚本的 html 文件中执行此操作。

在阅读了堆栈溢出之后，我发现这个链接表明我的问题的公认答案是将 js 代码放在"正文底部"，我假设这意味着我也可以把它放在结束 html 标签之后。因此，我尝试将脚本放在html标签关闭之后，甚至使用了window.onload方法，但似乎都不起作用。

我觉得我在基本层面上错过了一些东西，但我对javascript也相对较新。 这是代码：

<html>
<head>
  <meta charset="utf-8">
  <script src="http://d3js.org/d3.v3.min.js"></script>
  <script type="text/javascript">
    function draw(data) {
          var width = 960,
              height = 420;
          var colorScale = d3.scale.category20c();
          var treemap = d3.layout.treemap()
            .padding(4)
            .size([width, height])
            .value(function(d) { return d.size; });
          var svg = d3.select("body")
            .append("svg")
              .attr("width", width)
              .attr("height", height)
            .append('g')
                .attr('class','chart');
          var cell = svg.data([data]).selectAll("g")
              .data(treemap.nodes)
              .enter().append("g")
              .attr("class", "cell")
              .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
          cell.append("rect")
              .attr("width", function(d) { return d.dx; })
              .attr("height", function(d) { return d.dy; })
              .style("fill", function(d) { return colorScale(d.name); });
          cell.append("text")
              .attr("x", function(d) { return d.dx / 2; })
              .attr("y", function(d) { return d.dy / 2; })
              .attr("text-anchor", "middle")
              .text(function(d) { return d.name+" "+d.size+"%"; });
        };
  </script>
</head>
<body>
  <script type="text/javascript">
    d3.json("https://dl.dropboxusercontent.com/s/3csp4n28q3lcpqh/data.json", draw);
  </script>
</body>
</html>
<script>
window.onload = function ()
{
d3.select("rect").style({fill: "white"});
}
</script>

编辑：

我找到了问题的答案。在 draw 函数的末尾包含 d3.select 语句允许我更改样式。我之前做了这个，但不小心把它放在函数闭包之后，所以它没有包含在回调中。这让我走上了尝试通过等待现成文档以jQuery方式解决问题的道路。

我

创建了一个代码笔来共享我最初正在处理的代码和可视化：http://codepen.io/anon/pen/dGdagR

尽管已经找到了解决我问题的不同方法，但我仍然想知道为什么我不能在现成的文档上使用常规 javascript 访问 DOM。 这是 d3 的某种奇怪功能还是我无法正确理解的其他概念？

尝试在文档准备就绪后更改元素。现在你正在window.onload之后做

这个问题解释了window.onload和文档就绪之间的区别。 window.onload在资产准备就绪时触发。

试试这个片段。

document.addEventListener("DOMContentLoaded", function(e) { 
     d3.json("data.json", function(){
                draw();
                d3.select("rect").style({fill: "white"});
     });
});
相关文章：