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。

Answer 3

使用jQuery df = pd.DataFrame(np.zeros((5,5)), columns=list('ABCDE'), index=list("ABCGE")) mask = df.columns == df.index df.values[mask, mask] = 1 In [72]: df Out[72]: A B C D E A 1 0 0 0 0 B 0 1 0 0 0 C 0 0 1 0 0 G 0 0 0 0 0 E 0 0 0 0 1函数...

$(document)

Answer 4

只需在<script src="./custom.js"></script>代码之前添加</bod>即可。这是d3.select(#chart)在html正文中检测#chart元素的供应时间

Answer 5

我刚刚发现，如果您的元素ID仅为number，则d3.select（“ 1234”）将无法正常工作。

唯一ID必须为alpha-numeric字符。

~~d3.select（“ 1234”）~~

d3.select（“ container1234”）

Answer 6

请尝试这种方法。它对我有用。

<head> 
<script  type="text/javascript" src='./d3.v4.min.js'></script>
</head> 

<body>
    <div id="jschart41448" style="color:red">
        Hi red
    </div>

    <div id="jschart41449" style="color:blueviolet">
        Hi blueviolet
    </div>

 <script type="text/javascript"   >
            d3.select("#jschart41448").style('color', 'green' , null);
            d3.select("#jschart41449").style('color', 'yellow', null);
</script>
</body>

d3.select（“＃element”）在html元素上方的代码时无法正常工作

6 个答案: