d3.js - d3.select ("#element") 当代码位于 html 元素上方时不起作用

Question

这有效:

<div id="chart"></div>
<script>var svg = d3.select("#chart").append("svg:svg");</script>

这不会:

<script>var svg = d3.select("#chart").append("svg:svg");</script>
<div id="chart"></div>

我尝试将代码包装在 jquery document.ready() 中，使用 jquery 抓取元素，并将其传递到 d3.select 中，但这也不起作用。 编辑 一旦我得到了正确的 jquery document.ready() 语法，它就起作用了。

有什么方法可以将 javascript 包含在页面顶部并仍然选择下面的元素吗？谢谢。

Answer 1

<script>$(function(){var svg = d3.select("#chart").append("svg:svg");});</script>
<div id="chart"></div>

换句话说，它不会发生，因为您无法查询尚不存在的内容 - 因此只需在页面加载后执行即可(此处通过 jquery)。

顺便说一句，建议您将 JS 文件放在 body 标记结束之前。