javascript-防止d3和弦重叠

This demo(不是我的代码)将两个不同类别的项目相互比较,因此-与和弦图不同,在弦图中,任何项目都可以连接到其他项目-咖啡店不能连接到咖啡店,州也不能与各州相连.

如果首先使用Dunkin’Donuts,则有些楔形看起来像这样：

但是,如果星巴克在该州的价值更高,则其他楔形看起来像这样：

我认为不必要的重叠.元素的顺序不应由其值确定,而应由左侧的元素的顺序确定-即始终以Dunkin首先.

我看到某种情况正在发生

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

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

我们如何知道和弦是否为国家？似乎可以通过将和弦传递给chordRdr函数的rdr实例来获取信息,该实例将要排序的矩阵与mmap对象的元信息联系起来.

如何创建条件子组排序？

解决方法:

简短的答案：您无法在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()的自定义副本,如果您想与它一起玩,可以在上面的链接中找到它.

标签：svg,d3-js,javascript,chord-diagram
来源： https://codeday.me/bug/20191121/2051477.html