Question

我一周到D3＆amp;一个JS新手。我试图在几个“同等相关”的类别之间制作一个和弦图

  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);

输出就像

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

我用Google搜索，发现了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个值

['无关类别'，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和弦图

1 个答案: