在单独的HTML,JS和CSS文件中打破D3不起作用

时间:2015-07-25 20:50:25

标签: javascript html css d3.js svg

大多数HTML示例都在同一个文件中包含JavaScriptCSSindex.html。使用此示例http://bl.ocks.org/d3noob/5028304,我试图将这些文件分解为单独的文件(这样我就可以将D3嵌入到网站中,将文件放在适当的位置)。

当所有文件都放在一个文件中时,让我们说index.html,一切正常。当我将其分为3个文件:sankey_create.jsstyle.cssHTML时,<h1>Title</h1>标题(我插入header)会呈现,但SVG不会“T

可能的问题#1:文件引用

所有内容都在一个文件夹中,我认为我在console中正确引用了单独的文件(Firefox <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> <script src="sankey.js"></script> <script src="sankey_create.js"></script> <link rel="stylesheet" type="text/css" href="style.css"> 表示已加载所有文件):

HTML

可能的问题#2:绑定到外部<p id="chart">元素

此示例的工作方式是D3 SVG绑定到的var svg = d3.select("#chart").append("svg") // This line is in sankey_create.js 元素:

png32:

我不确定我是否需要以不同方式引用该元素,因为它们位于不同的文件中。

我只包含了我认为可能导致此问题的代码,但如果需要,我可以提供更多代码/信息。

1 个答案:

答案 0 :(得分:2)

要分析您需要从语义上理解的问题,脚本标记可以替换为它们引用的代码,并且在处理下一个节点之前执行引用的代码,因此它与拥有代码相同在脚本标记所在的索引文件中。