排序链接D3js强制有向图[关闭]答案

【问题标题】：Sort links D3js force directed graph [closed]排序链接D3js强制有向图[关闭]
【发布时间】：2014-01-02 11:28:59
【问题描述】：

我有一个力有向图，有 3 种颜色（红色、绿色和橙色）用于链接。是否可以根据颜色对链接进行排序？

谢谢和最好的问候。

【问题讨论】：

您能否添加一个 jsfiddle.net 您当前设置的示例？
jsfiddle.net/WV4fH 谢谢。
请将您的 HTML 标记添加到示例中。
它不起作用，因为数据数组是从 odata 服务动态设置的:(
我想你可以在你的 jsfiddle 中放一些测试/样本数据。

【解决方案1】：

d3 有一个sort 对选择进行操作的方法。因此，如果您想按颜色对选择进行排序，您可以这样做：

var order = {red: -1, green: 0, orange: 1};

var links = d3.selectAll('line.link')
  // a and b are data items, in this case links. This code assumes that there
  // exists a color property on the links which is 'red', 'green', or 'orange'.
  .sort(function(a, b) {
    return order[a.color] < order[b.color] ? -1 : order[b.color] < order[a.color] ? 1 : 0;
  });

从documentation 看来，这也会对 DOM 元素进行排序，以便文档顺序与选择顺序相同：

selection.sort(比较器)

根据指定对当前选择中的元素进行排序比较器功能。比较器函数传递两个数据要比较的元素 a 和 b，返回负数、正数或零值。如果为负，则 a 应在 b 之前；如果是肯定的，那么 a 应该在 b 之后；否则，a 和 b 被认为是相等的，并且顺序是任意的。请注意，不能保证排序是稳定的；但是，它保证与您的浏览器具有相同的行为数组的内置排序方法。

selection.order()

将元素重新插入到文档中，以使文档顺序匹配选择顺序。这相当于调用 sort() 如果数据已经排序，但速度更快。

order 方法使 DOM 元素顺序与选择顺序匹配，如果选择已经排序，则更可取。

文档：

selection.sort()

selection.order()

【讨论】：

谢谢，我会试试的