防止d3和弦重叠

Question

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

有些楔子看起来像这样，如果Dunkin＆＃39;甜甜圈首先出现：

但是，如果星巴克在该州拥有更高的价值，那么其他楔子就像这样：

在我看来，不必要的重叠。元素的顺序不应该由它们的值决定，而是由左侧元素的顺序决定 - 也就是说，总是Dunkin＆＃39;第一

我在

中看到了一种情况

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

但我不确定如何为州元素指定自定义排序。让咖啡店子组按desc（或asc）排序是有意义的，但各州不应该得到相同的处理。

我们如何知道和弦是否属于州？似乎可以通过将和弦传递到rdr函数的chordRdr实例来拉取信息，该matrix函数将mmap与正在排序的元素联系起来。来自{{1}}对象的信息。

如何创建条件子组排序？

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()的自定义副本，可以在上面的链接中找到，如果你想玩它的话。

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或从something simpler开始，不需要冗余的值矩阵可能会更好。