防止d3弦图中的弦重叠

Question

这个演示

（不是我的代码）将两个不同类别的项目相互比较，因此，与和弦图不同，任何项目都可以连接到任何其他项目，咖啡店不能连接到咖啡店，州也不能连接到州。

如果Dunkin' Donuts排名第一，则某些楔形图看起来像这样：

但是其他楔子看起来像这样，如果星巴克在该州具有更高的价值：

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

我看到一种排序发生在

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

但我不确定如何为状态元素指定自定义排序。对于咖啡店子组，按降序（或升序）排序是有意义的，但状态不应该得到同样的处理。

我们如何知道一个弦是状态还是其他？似乎可以通过将弦传递给chordRdr函数的rdr实例来获取信息，这将matrix与mmap对象的元信息联系起来，而matrix是正在排序的对象。

如何创建条件子组排序？

- Martin Burch

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]);
    });
  });
}

源代码

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

我能想到的唯一合法的方法是拥有一个自定义的 d3.chord.layout() 副本，可以在上面链接中找到，如果你想尝试。

- Mike Precup

---

是的，说得好。chord() 函数不知道矩阵映射的任何信息。它只能操作数字矩阵。排序函数也需要 mmap 变量。 - Martin Burch

Answer 2

我不建议实际使用这个solution:

//all the values in matrix are integers
//we can track the numbers that are starbucks stores
//by adding a small decimal to them
matrix = matrix.map(function(row){
  return row.map(function(d, i){
    return d + (i == row.length - 1 ? 1e-7 : 0) })
})

//now we can do a lexicographic sort 
//first checking for the presence of a decimal and then size
var chord = d3.layout.chord()
    .sortSubgroups(function(a, b){
      if (a != Math.round(a)) return false
      if (b != Math.round(b)) return true
      return b < a ? -1 : b > a ? 1 : 0;
    })

修改 d3.layout.chord 或者从 更简单的东西 开始可能在大多数情况下效果更好，因为它不需要冗余的值矩阵。

- Adam Pearce