javascript - 防止 d3 和弦重叠

Question

This demo (不是我的代码)将两种不同类别的项目相互比较，所以——不像和弦图，其中任何项目都可以连接到任何其他项目——咖啡店不能连接到咖啡店，状态不能连接到状态。

有些挖起杆看起来像这样，如果 Dunkin' Donuts 先出现的话:

但其他楔子看起来像这样，如果星巴克在该州有更高的值(value):

在我看来，不必要的重叠。元素的顺序不应由它们的值决定，而应由左侧元素的顺序决定——也就是说，总是 Dunkin' 在前。

我看到发生在

 var chord = d3.layout.chord()
             .padding(.02)
             .sortSubgroups(d3.descending)

但我不确定如何为状态元素指定自定义排序。将咖啡店子组按降序(或升序)排序是有意义的，但各州不应该得到相同的待遇。

我们如何知道一个和弦是否是一个状态？似乎可以通过将和弦传递给 chordRdr 函数的 rdr 实例来提取信息，该实例与 matrix 相关联，这就是正在发生的事情排序，从 mmap 对象元信息。

如何创建条件子组排序？

Answer 1

简短的回答:你不能在 d3 中做到这一点。

这是 d3 执行排序的方式:

// Sort subgroups…
if (sortSubgroups) {
  subgroupIndex.forEach(function(d, i) {
    d.sort(function(a, b) {
      return sortSubgroups(matrix[i][a], matrix[i][b]);
    });
  });
}

Source

它将对每个子组执行排序。

我能想到的使这项工作合法的唯一方法是拥有 d3.chord.layout() 的自定义副本，如果您需要，可以在上面的链接中找到它玩弄它。