防止d3和弦重叠

Question

这个演示 (不是我的代码)比较了两种不同类别的项目，所以--不像chord图，任何项目都可以连接到任何其他项目--咖啡店不能连接到咖啡店，州不能连接到州。

有些楔子看起来是这样的，如果邓肯甜甜圈是第一位的：

​

​

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

​

​

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

我看到了一种

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

但我不确定如何为state元素指定自定义排序。让咖啡店的子组对desc (或asc)进行排序是有意义的，但是各州不应该得到同样的待遇。

我们怎么知道和弦是否是一种状态？似乎可以通过向rdr函数的chordRdr实例传递一个chord来提取信息，该实例将正在排序的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]);
    });
  });
}

来源

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

我唯一能想到的使这个工作合法的方法是拥有一个d3.chord.layout()的定制副本，如果你想玩它，可以在上面的链接找到它。

Answer 2

我不建议实际使用这个解决方案

//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或从不需要冗余值矩阵的更简单的东西开始，在大多数情况下可能会更好。