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

Breaking D3 in separate HTML, JS and CSS files not working

本文关键字:CSS 文件 工作 JS D3 单独 HTML 打破      更新时间:2023-09-26

大多数D3示例都将HTML, JavaScriptCSS放在同一个文件中。使用这个例子http://bl.ocks.org/d3noob/5028304,我试图打破这些成单独的文件(这样我就可以嵌入D3到一个网站,把文件在适当的位置)。

当所有文件都在一个文件中,比如index.html,一切都正常工作。当我将其分成3个文件:index.html, sankey_create.jsstyle.css时,HTML的标题(我插入的<h1>Title</h1>)呈现,但SVG没有。

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

一切都在一个文件夹中,我认为我已经在header中正确引用了单独的文件(Firefox中的console表示所有文件都已加载):

<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">

可能问题#2:绑定到外部HTML元素

这个例子的工作方式是,D3 SVG绑定到一个<p id="chart">元素:

var svg = d3.select("#chart").append("svg") // This line is in sankey_create.js

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

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

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