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

【问题标题】：Creating a bar chart in D3 from subset of json data. Xaxis is ordinal从 json 数据子集在 D3 中创建条形图。 Xaxis 是序数的
【发布时间】：2026-01-31 06:20:03
【问题描述】：

 [  
   ...
   {

     "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 或名称。因此，对于每个“B”、...“花卉”数据，应该有 5 个条形的“块”（颜色对应于“名称”）。最终目标是让用户可以轻松地根据其属性直观地比较 5 个对象（由 Name 属性区分）。

我已经为这个问题工作了至少 24 小时。而且我没有任何进展。我看过 * 上的教程和其他帖子。我无法让它们中的任何一个工作。

有人吗？

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

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

【问题讨论】：

请不要在几个小时后问两个非常相似的问题。编辑主要问题，以便您的所有答案、cmets 和回复都在同一个位置。此外，只有当您花时间让它们在除您遇到问题的一个区域之外的所有方面都可用时，小提琴才有用。否则，您不妨将代码转储到此处。
How to create a bar chart in D3?的可能重复
好吧，我试图删除它。然后我将其标记为已关闭，因为它不允许我删除它。

标签： javascript json d3.js bar-chart

【解决方案1】：

你想做的是grouped bar chart。您需要做的主要事情是创建 2 个 x 比例：一个给出每个组的位置，或者您称之为丛集，在屏幕中，另一个给出每个系列的位置（在本例中为名称）组内。

// 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/

【讨论】：

它仍然无法正常工作，并且行“x0.rangeBoundBands([0, width], 0.1);”给出错误“TypeError: 'undefined' is not a function (evalating 'x0.rangeBoundBands([0, width], 0.1)')”。完整代码：jsfiddle.net/zdy6d
我的代码有错误，抱歉（Javascript in 不如 Python in 酷），已编辑。我还添加了更多信息。如果您在数据处理方面遇到问题，我可以稍后给出一些指示，此时我正在用智能手机打字。
过去几天我一直在研究这个例子。我不知道如何让它为我工作。我有 86 个“东西”，我需要 5 个。我不确定您的意思或如何将数据转换为更方便的格式。
是的，这仍然不起作用。我无法获取图例的数据，而且这些框看起来都很奇怪。
运行程序时有太多未定义的东西。