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文件.

Answer 2

没有足够的声誉发表评论所以我只想把它放在这里:

为了扩展Micah的答案 - 浏览器从上到下运行你的代码,所以如果你写:

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

浏览器将创建一个id为"chart"的div,然后运行你的脚本,它将尝试找到div,并且,欢呼,成功.

否则,如果你写:

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

浏览器运行您的脚本,并尝试查找具有ID图表的div,但尚未创建它因此失败.

然后浏览器创建一个id为"chart"的div.