D3.js 选择新的 JSON，丢失图像顺序和鼠标悬停答案

【问题标题】：D3.js Select new JSON, lose image order and mouseoverD3.js 选择新的 JSON，丢失图像顺序和鼠标悬停
【发布时间】：2015-09-16 06:36:14
【问题描述】：

我使用 SELECT 下拉框为力网络图选择新的 JSON 数据源。第一张图正确绘制：节点绘制在边缘之上，鼠标悬停按预期工作。

当我选择第二个数据源时，边缘在节点顶部绘制，我失去了鼠标悬停。如果我回到选择“A”，除了最后一个节点之外也是如此。

强制堆栈溢出代码包含：

 //EXIT
 edges.exit().remove();
 nodes.exit().remove();

我认为这是我的 ENTER/UPDATE/EXIT 以及我用来退出元素的键的问题？请查看小提琴中的代码。

任何建议将不胜感激。我的下一步是添加边缘标签，因此我想确保我得到节点和边缘并首先工作。

【问题讨论】：

我没有看到任何工作。
对不起，kwoxer。我已将 URL 发布为 https。它现在应该可以工作了（jsfiddle.net/NovasTaylor/e6qjubaa）。
我的项目中遇到了同样的问题 (arda-maps.org/familytree)。我用自己的想法解决了。主要是调用 svg.remove(); 和 nodeCircles = {};。所以我每次都删除所有节点并创建一个新的演示文稿。但正如你在我的项目中看到的那样，它运行得非常好而且很快。随意查看我的实现。该文件名为 familytree-d3.js
很抱歉延迟跟进。夸克瑟。你有一个非常巧妙的实现——干得好！我查看了您的 .js 文件。不幸的是，我仍然不知道如何在我的 exit() 中正确实现这一点，主要是因为我的新手级别。可能的提示：将图 A 中的节点移动到新位置。然后使用下拉菜单选择图表 B。然后再次选择图 A。图 A 保留了新的位置，而不是原始数据中的位置。所以我还需要清除数据并从头开始重新绘制整个图表。这就是我卡住的地方。
注意：如果看不到fiddle中的节点：在jsfiddle.net/..... URL前面添加“http://”。然后会出现图表。

标签： d3.js

【解决方案1】：

所以只需在 combobox 中添加几行：

d3.selectAll('#familytreecontentsvg .node')
    .each(function (d) {
        d.fixed = false;
    })
    .classed("fixed", false)

我将 svg 对象移动到图纸中，同时在上面将其初始化为空。我还为 SVG 本身创建了一个 id。希望能帮助到你。请告诉我这是否能解决您的问题。

【讨论】：