Question

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

在阅读了stackoverflow之后，我发现这个link表明接受我的问题的答案是将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>

修改

我找到了问题的答案。在绘制函数的末尾包含d3.select语句允许我更改样式。我之前做过这样的事情，但是在函数关闭之后意外地放置了它，所以它没有包含在回调中。这导致我试图通过等待准备好的文档以jQuery的方式解决问题。

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

尽管找到了解决我问题的不同解决方案，但我仍然想知道为什么我无法在准备好的文档上使用常规javascript访问DOM。这是d3或其他概念的一些奇怪的功能我不能正确理解吗？

Answer 1

尝试在文档准备好后更改元素。现在你是在window.onload

之后做的

This问题解释了window.onload＆amp;文件准备好了资产准备就绪时会触发window.onload。

试试这个代码段。

document.addEventListener("DOMContentLoaded", function(e) { 

     d3.json("data.json", function(){
                draw();
                d3.select("rect").style({fill: "white"});
     });

});

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

1 个答案: