Question

 [  
   ...
   {

     "RowID":85,
     "Name":"Billy",
     "B":2,
     "S":2,
     "S2":1,
     "M":0,
     "T":"0",
     "H":1,
     "S":0,
     "W":1,
     "N":2,
     "Malty":1,
     "Fruity":0,
     "Floral":0
 }

 ...
 ]

我需要创建一个条形图。只是一个普通的条形图。

总共有86个JSON数据（也就是说，你会找到86个RowID）。我只需要选择5-10我想要合作。 x轴是来自JSON的“B”，“S”......“Floral”。它不包括RowID或Name。因此，对于每个“B”，......“花卉”数据，应该存在5个条（“颜色对应于”名称“）的”块“。最终目标是使用户可以根据其属性在视觉上比较5个对象（由Name属性区分）。

我在这个问题上至少工作了24个小时。而且我没有取得任何进展。我查看了StackOverflow上的教程和其他帖子。我不能让他们中的任何一个工作。

任何？

不，这个问题在其他地方没有答案。

小提琴：http://jsfiddle.net/zdy6d/3/

Answer 1

你想要做的是grouped bar chart。你需要做的主要是创建2个x-scale：一个给出每个组的位置，或者在你调用时给出丛，在屏幕中给出每个系列的位置（在这种情况下是名称）在集团内部。

// Where to position each clump inside svg chart
var x0 = d3.scale.ordinal();
x0.domain(d3.keys(data[0]).filter(function(key) { return key !== 'RowID' && key !== 'Name'; }));
x0.rangeRoundBands([0, width], 0.1);

// Where to position each name bar inside the clump
var x1 = d3.scale.ordinal();
x1.domain(data.map(function(d) { return d.Name; } ));
x1.rangeRoundBands([0, x0.rangeBand()]);

然后您必须过滤数据并将其结构更改为更方便的格式（例如[{groupname: 'B', data: [{name: 'Bobby', value: 3}, {name: 'Tom', value: 5}, ... ]}, ...]应该类似于我链接使用的示例）

使用数据操作和矩形创建示例的最小工作JSFiddle：http://jsfiddle.net/LeartS/23huy/2/

在D3中从json数据子集创建条形图。 Xaxis是序数

1 个答案: