过滤/排序导致力有向图中的链接不正确答案

【问题标题】：Filter/Sort causing incorrect links in force directed graph过滤/排序导致力有向图中的链接不正确
【发布时间】：2012-06-27 15:38:09
【问题描述】：

我有一个 D3 力有向图，它首先显示有几个节点。每个节点都有一个单击处理程序，它将进一步扩展图形并动态添加更多节点和链接到单击的节点。每个节点也有一个 SVG 矩形形状。因为新链接和节点被添加到现有图形中，所以链接出现在单击节点的顶部，因为 SVG 是“画家”模型。所以我使用 d3.selectAll().filter().sort() 以正确的顺序放置 DOM 节点。除了节点和链接在有向图上放错位置外，这是可行的。有什么方法可以使用 sort() 同时保持 force.nodes() 和 force.links() 数据同步？

更新：我创建了一个 jsfiddle 来演示这种情况。单击几下创建新节点后，链接变得不稳定。如果对“reorder_nodes_and_links()”的调用被注释掉，图表是稳定的，但由于 DOM 顺序，链接会呈现在节点之上。

http://jsfiddle.net/bobfaist/MURwA/

【问题讨论】：

标签： javascript dom d3.js

【解决方案1】：

selection.insert 接受第二个参数，告诉它在其他东西之前插入东西。

我现在看不到你的小提琴，但这是来自类似项目的东西。

这会在任何归类为节点的内容之前插入新行。

lines.enter().insert("svg:line", ".node")

https://github.com/mbostock/d3/wiki/Selections#wiki-insert

【讨论】：

感谢您的帮助。效果很好。阅读文档时完全错过了这一点。我不需要 filter().sort()，因为 insert() API 现在具有所需的行为。