小编Vid*_*mar的帖子

d3嵌套分组条形图

首先对不起,如果我的英语难以理解,我会尽我所能......

我是D3.js的新手,我正在尝试使用嵌套数据创建D3分组条形图.我已经看过这里分享的一些解决方案,但它们只显示了一级分组.就我而言,数据将来自具有此数据结构的csv文件:

groups,categories,value 1,value 2,value 3
group 1,A,61.0158803,25.903359,13.08076071
group 1,B,71.27703826,21.0180133,7.70494844
group 1,C,82.70203982,13.52731445,3.770645737
group 2,A,58.85721523,28.25939061,12.88339417
group 2,B,71.39695487,20.66010982,7.942935308
group 2,C,82.22389321,13.68924542,4.08686137
Run Code Online (Sandbox Code Playgroud)

该图表有两个x轴,一个用于组(级别0),一个用于类别(级别1).值1到3将显示为每个catergory的分组条形,类别将显示在相应的组.

图表的结构应为:

value 1 | value 2 | value 3 | value 1 | value 2 | value 3 | value 1 | value 2 | value 3 |
|        category A         |          category B         |          category C         |
|                                       group 1                                         |
Run Code Online (Sandbox Code Playgroud)

和第2组相同,放置连续.

问题在于我正在处理的代码,我得到了正确的轴,但是在每个组区域中显示了对应于两个组的数据,一个在另一个的顶部.我无法将类别上的数据链接到其对应的组中,以便在相应的位置绘制它们.

这是我到目前为止的代码:

var x0 = d3.scale.ordinal()
  .rangeRoundBands([0,width], 0);

var x1 = d3.scale.ordinal()
.rangeRoundBands([0,width]);

var x2 = d3.scale.ordinal();

var …
Run Code Online (Sandbox Code Playgroud)

javascript charts d3.js

2
推荐指数
1
解决办法
3038
查看次数

标签 统计

charts ×1

d3.js ×1

javascript ×1