D3和弦图

Question

我刚接触 D3 一周，而且是 JS 新手。我正在尝试在几个 'equally related' 类别

之间制作和弦图

  var chart = d3.chart.dependencyWheel();
  var data = {
  packageNames: ['Category A', 'Category B', 'Category C', 'Category D', 'Category E', 'Category F', 'Category G'
                ,'Category H', 'Category I', 'Category J', 'Category K', 'Category L', 'Category M', 'Category N'
                ,'Category O', 'Category P', 'Category Q', 'Category R', 'Category S', 'Category T', 'Category U'],
  matrix: [ // 1st 7 categories are equally related to one another
           [0, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], 
           [1, 0, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],  
           [1, 1, 0, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], 
           [1, 1, 1, 0, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], 
           [1, 1, 1, 1, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], 
           [1, 1, 1, 1, 1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], 
           [1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], 
           // next 9 categories are equally related to one another
           [0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0], 
           [0, 0, 0, 0, 0, 0, 0, 1, 0, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0], 
           [0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0], 
           [0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 0, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0], 
           [0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 0, 1, 1, 1, 1, 0, 0, 0, 0, 0], 
           [0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 0, 1, 1, 1, 0, 0, 0, 0, 0], 
           [0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 0, 1, 1, 0, 0, 0, 0, 0], 
           [0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 0, 1, 0, 0, 0, 0, 0], 
           [0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0], 
           // next 2 categories are equally related to one another
           [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0], 
           [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0], 
           // next 3 categories are Not at all related
           [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], 
           [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], 
           [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], 
           ] 
};
    d3.select('#chart_placeholder')
        .datum(data)
        .call(chart);

输出就像

我不喜欢的是彩色显示。理想情况下，我希望每个类别都使用独特的颜色并在使用悬停时显示数据。

我用谷歌搜索并找到了这个 http://racingtadpole.com/blog/flows-d3-chord-hover/ 我修改了它以添加一个不相关的类别

var colors = d3.scale.ordinal().range(["#AAA", "steelblue", "green", "orange", "brown","#7FFF00"]);
  var hoverHtml = {'Category A': '<h1>Introverts</h1>Like to be by themselves', 
      'Category B': '<h1>Extroverts</h1>Like the company of other people', 
      'Category C': '<h1>Optimists</h1>Look on the bright side of life',
      'Category D': '<h1>Neutrals</h1>Life could be good, it could be bad',
      'Category E': '<h1>Pessimists</h1>See the glass half empty',
      'Unrelated Category':'<h1>Unrelated Category</h1>Unrelated Category'}
  var chordDiagram = d3.elts.flowChord().colors(colors).hoverHtml(hoverHtml).rimWidth(30);
  var data = [['Alpha','Category C','Category D','Category E'],['Category A', 0.8, 0.4, 0.67], ['Category B', 0.2, 0.6, 0.33],['Unrelated Category', 0.0, 0.0, 0.0]]
  d3.select("#flow").datum(data).call(chordDiagram);

这里的问题是，不相关的类别在 UI 上不可见

不确定如何实现我的用例。

理想情况下我想要一个和弦图

每个类别都以其独特的颜色显示
一些数据在用户悬停时过来
不相关的类别应显示在 UI

如有任何指点，我们将不胜感激

Answer 1

您已为无关类别数据点传递了 0 个值

['Unrelated Category', 0.0, 0.0, 0.0]

因此，您的不相关类别弧将跨越 0 度（即它不会存在）。

每条弧所跨越的度数是与其链接的值之和的相对度量。例如，如果您有 6 个类别，每个类别恰好与其他 3 个具有相同值的类别相关联，则您将有 60 度弧。

就是说，您可以插入 2 个虚拟类别，为它们涂上相同的颜色并将它们映射到彼此以占用一些弧度，就像这样

var colors = d3.scale.ordinal().range(["#AAA", "steelblue", "green", "green", "orange", "brown", "#7FFF00"]);
var hoverHtml = {
    'Category A': '<h1>Introverts</h1>Like to be by themselves',
    'Category B': '<h1>Extroverts</h1>Like the company of other people',
    'Category C': '<h1>Optimists</h1>Look on the bright side of life',
    'Category D': '<h1>Neutrals</h1>Life could be good, it could be bad',
    'Category E': '<h1>Pessimists</h1>See the glass half empty',
    'Unrelated': '<h1>Unrelated Category</h1>Unrelated Category',
    'Unrelated': '<h1>Unrelated Category</h1>Unrelated Category'
}
var chordDiagram = d3.elts.flowChord().colors(colors).hoverHtml(hoverHtml).rimWidth(30);
var data = [['Alpha', 'Unrelated', 'Category C', 'Category D', 'Category E'],
            ['Category A', 0, 1, 1, 1],
            ['Category B', 0, 1, 1, 1],
            ['Unrelated', 1, 0, 0, 0]]
d3.select("#flow").datum(data).call(chordDiagram);

// hide the flow (we select by index just as an example)
d3.select('.flows path:nth-child(7)').style('opacity', 0);

用这个CSS

.labels text:nth-child(4n) {
    display: none;
}

如果您想将标签放在中间，您可以使用 d3 来实现，或者您实际上可以有 2 个虚拟类别而不是 1 个映射到中间的实际不相关类别并隐藏标签虚拟类别。

D3和弦图

D3 and chord diagram

javascript

d3.js

chord-diagram