防止d3和弦重叠 [英] Preventing d3 chords from overlapping

问题描述

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

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

This demo (not my code) compares two different categories of items to each other, so -- unlike a chord diagram where any item can be connected to any other item -- coffee shops can't be connected to coffee shops and states can't be connected to states.

Some wedges look like this, if Dunkin' Donuts come first:

But other wedges look like this, if Starbucks has a higher value in the state:

Unnecessary overlap, in my opinion. The order of the elements shouldn't be determined by their value, but instead by the order of the elements on the left side -- that is, always Dunkin' first.

I see a sort happening in

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

but I'm not sure how I can specify a custom sort for the state elements. It makes sense to have the coffee shop subgroups sorted desc (or asc) but the states shouldn't get the same treatment.

How do we know if a chord is a state or not? It seems that information can be pulled by passing a chord to the rdr instance of the chordRdr function, which ties the matrix, which is what's being sorted, to meta-information from the mmap object.

How can I create a conditional subgroup sort?

解决方案

Short answer: you can't do it in d3.

This is how d3 performs the sort:

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

Source

It will perform the sort for every subgroup.

The only way I can think of to make this work legitimately would be to have a custom copy of d3.chord.layout(), which can be found at the above link, if you want to toy with it.

这篇关于防止d3和弦重叠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！