d3.js - 将 HTML 加载到面板时 D3 无法正常工作

Question

我创建了一个带有两个面板的网页；左边的是可点击的文字，右边的是空的。当您单击左侧的文本时，相应的 HTML 页面会加载到右侧面板中。这一切都很顺利，除非要加载的 HTML 文件包含 D3.js 图形，在这种情况下，HTML 元素会加载而图形不会加载。

下面是加载 HTML 文件的代码：

function displayDetails(details_filename) {
     $("#details_panel").load("details/" + details_filename + ".html");
}

有什么理由只加载 HTML 而忽略 D3 图表？我检查了 D3.js 库是否被正确引用。值得注意的是，HTML 文件在单独加载时可以正常工作，但在将其加载到面板中时就不行了。

我期待听到你的想法！在此先感谢您的帮助。

Answer 1

首先想到的是确保您选择了正确的 HTML 元素（body、#div2 等）。

svg = d3.select("#rightDiv")
   .append("svg")
   .attr("width", w + margin.left + margin.right)
   ...;