0

我是 D3 和 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);

输出就像 在此处输入图像描述

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

我搜索了一下，发现了这个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 上

将不胜感激任何相同的指针

4

1 回答 1

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 个映射到中间的实际不相关类别并隐藏虚拟类别的标签。

于 2015-08-10T16:54:07.663 回答