Question

我正在构建一个SPA，我想在我的一个页面中使用d3.js进行图形表示。

我的问题是index.html首先加载<script>而不加载，而此时加载 <div ng-view></div> 尚未填补。所以我无法加载我的d3 javascript，它需要加载DOM以通过选择器访问DOM项目：

var svg = d3.select("#svgBarChart").append("svg")... 指的是 <div id="svgBarChart"></div>位于dashboard.html（见下文）

所以我想做的是：

1）等待加载index.html，以及所有脚本和css

2）index.js加载所需的页面。在我加载http://myurl/#/dashboard的场景中，所以routeProvider模块加载正确的html（dashboard.html）并将其链接到正确的控制器（包含在已经从index.html加载的dashboard.js中）。这工作正常

3）当加载dashboard.html时，它会运行我插入的脚本，即d3脚本。如果我在.html文件的末尾加载脚本，它应该在加载所有DOM元素后加载它，对吧？目前，如果我这样做，脚本已加载，但我认为它找不到div。

这是dashboard.html部分

<div id="svgBarChart"></div>
<script type="text/javascript" src="../public/js/d3dashboard.js"></script>

这使我在浏览器控制台中出现以下错误

index.js:248 Uncaught TypeError: Cannot read property 'tagName' of null
  at getSVGNode (index.js:248)
  at tip (index.js:33)
  at ut.call (d3.min.js:2)
  at HTMLDocument.<anonymous> (d3dashboard.js:32)
  at j (jquery.min.js:2)
  at Object.fireWith [as resolveWith] (jquery.min.js:2)
  at Function.ready (jquery.min.js:2)
  at HTMLDocument.J (jquery.min.js:2)

我在第248行查看了index.js（d3文件）：

function getSVGNode(el) {
  el = el.node()
  if(el.tagName.toLowerCase() === 'svg')
    return el

  return el.ownerSVGElement
}

所以el为空，这意味着它没有找到div元素，对吗？

任何帮助表示感谢。

Answer 1

如果将D3代码放入其中，可能会有所帮助，以确保在执行D3特定代码之前完全呈现/加载DOM。

document.addEventListener("DOMContentLoaded", function(event) { 
  //do d3 stuff here
});

如果您使用的是jQuery，可以使用：

$( document ).ready(function() {
    //do d3 stuff here
});

D3.js：在html之后加载js文件

1 个答案: