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

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

总共有86个JSON数据段（即，您将发现86个rowid）。我只需要选择5-10个我想合作的项目。x轴是“B”、“S”。。。来自JSON的“花卉”。它不包括RowID或Name。所以每个“B”应该有5个条组成的“束”（颜色对应于“名称”）。。。“花卉”数据。最终目标是让用户能够轻松地根据5个对象的属性直观地比较它们（按名称属性区分）

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

有人吗

不，这个问题在别的地方没有答案

小提琴：

你想做的是一把小提琴。您需要做的主要事情是创建两个x比例：一个在屏幕上显示每个组的位置，或者您称之为“束”，另一个在组内显示每个系列（本例中为名称）的位置

 [  
   ...
   {

     "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
 }

 ...
 ]

然后，您必须过滤数据，并可能将其结构更改为更方便的格式（例如，

[{groupname:'B'，data:[{name:'Bobby'，value:3}，{name:'Tom'，value:5}，…]}，]

应该与我链接的示例使用的格式类似）

---

最小工作JSFIDLE和数据操作和rect创建示例：

它仍然不工作，行“x0.RangeBundBands（[0，宽度]，0.1）；”给出了错误“TypeError:“undefined”不是函数（评估“x0.RangeBundBands（[0，宽度]，0.1）”）。完整代码：我的代码中有一个错误，抱歉（中的Javascript

不如中的Python
酷），已编辑。我还补充了一些信息。如果你在数据处理方面有问题，我可以稍后给出一些指示，此时我正在用智能手机打字。所以我在过去几天一直在看这个例子。我不知道如何让它为我工作。我有86件“东西”，我需要5件。我不知道你的意思是什么，也不知道如何将数据转换成更方便的格式。是的，这仍然不起作用。我无法获取图例的数据，并且这些框看起来都很奇怪。当我运行程序时，有太多的东西是未定义的。请不要在几个小时内问两个非常相似的问题。编辑主要问题，使您的所有答案、评论和答复都位于同一位置。此外，小提琴只有在你花时间让它在除你有问题的一个领域之外的所有领域都发挥作用时才有用。否则，您最好将代码转储到这里。可能是重复的，我试图删除它。然后我将它标记为关闭，因为它不允许我删除它。
// 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()]);