我是 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"});
});
});