如何在D3中创建条形图？ [英] How to create a bar chart in D3?

问题描述

我需要帮助创建条形图，只是一个正常的条形图。

I need help creating a bar chart, just a normal bar chart.

我有5个对象，每个对象都有自己的10个字段。我想创建一个side-by-side条布局，其中x轴标签是10个字段。在第i个字段上方应为每个5个对象的矩形，每个高度对应于该字段的对象数据。每个对象都有自己独特的颜色。

I have 5 objects, each with their own 10 fields. I want to create a side-by-side bar layout where the x axis labels are the 10 fields. Above the ith field should be a rectangle for each 5 object with each height corresponding to that objects data for that field. Each object has its own distinctive color.

我花了4个多小时，没有什么。 Google没有任何帮助。注意：条形图的矩形应该是垂直的。

I've spend 4+ hours and I've got nothing. Google reveals nothing that helps. Note: the rectangles of the bar chart should be vertical.

编辑：我没有得到很多帮助。答案是没有帮助的，虽然没有作者的过错。所以这里是我的情况。我正在读一个JSON。 JSON格式

I'm not getting a lot of help. The answers have been unhelpful, though no fault of the authors. So here's my situation. I'm reading a JSON. The format of the JSON

 [  
   ...
   {
     "RowID":85,
     "Name":"Tormore",
     "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个工作。需要有5种颜色，或者我想使用的很多rowID。 x轴是来自JSON的B，S...Floral。因此，对于每个B，...花的数据，应该有5个条块（颜色对应于名称）的团块。最终目标是使用户容易地根据其属性在视觉上比较5个事物。

There are a total of 86 JSON pieces of data. That is, there 86 RowID's. I need to only work with 5. There needs to be 5 colors or however many rowID's I want to work with. The x-axis are the "B", "S" ... "Floral" from the JSON. So there should be "clumps" of 5 bars (colored corresponding to "Name") for each "B", ... "Floral" piece of data. The end goal is to make it easy for the user to visually compare 5 things according to their attributes.

我无法使用给定的示例工作。我一直在这工作至少6个小时。

I cannot make this work with the given examples. I've been working on this for at least 6 hours. I'm at my wits end.

推荐答案

有时很难解释问题...我认为用户可能想要一个分组的条形图:-)无论如何，我借用这个来自迈克的图表，并烹饪了 UPDATED与适当的变数名称。如果这是你想要的，你可以添加更多的字段和对象，当然，适当地改变值。

It is tough to interpret questions at times...I thought the user might want a grouped bar chart :-) Anyways, I borrowed this graph from Mike and cooked up this UPDATED fiddle with appropriate variable names. If that is what you want, you can add more fields and objects and, of course, change the values appropriately. (The color scale may have to be touched as well.)

一些假数据：

var data = [
    {"Field":"Field1","Object1":"2704659","Object2":"4499890"},
    {"Field":"Field2","Object1":"2027307","Object2":"3277946"},
    ...

这篇关于如何在D3中创建条形图？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！