Question

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

谢谢和最诚挚的问候。

Answer 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（）if   数据已经排序，但速度要快得多。

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

文档：

selection.sort()

selection.order()

排序链接D3js强制有向图

1 个答案: