D3.js：如何从分组条形图中的 JSON 读取数据答案

【问题标题】：D3.js : How to read data from JSON in Grouped Bar ChartD3.js：如何从分组条形图中的 JSON 读取数据
【发布时间】：2014-07-29 16:26:18
【问题描述】：

我正在研究D3.js，我正在探索 D3 的各个方面。在探索Grouped Bar Chart 时，我可以通过 JSON（而不是通过 CSV）读取文件。

如果您可以在Grouped Bar Chart 中看到他们正在使用data.csv

State,Under 5 Years,5 to 13 Years,14 to 17 Years,18 to 24 Years,25 to 44 Years,45 to 64
Years,65 Years and Over
CA,2704659,4499890,2159981,3853788,10604510,8819342,4114496
TX,2027307,3277946,1420518,2454721,7017731,5656528,2472223
NY,1208495,2141490,1058031,1999120,5355235,5120254,2607672
FL,1140516,1938695,925060,1607297,4782119,4746856,3187797
IL,894368,1558919,725973,1311479,3596343,3239173,1575308
PA,737462,1345341,679201,1203944,3157759,3414001,1910571

我想使用 JSON 文件构建相同的图表。 如何将此 CSV 文件转换为 JSON 文件并生成相同的图表？请帮助。

编辑

我根据自己的需要自定义此图表。这是我的data.csv

State,Orders,Abandoned
0,300,500
1,400,600
2,500,700
3,600,800
4,700,900
5,800,1000
6,900,1100
7,1000,1200
8,700,900
9,600,700
10,550,750

所以我在这里对所有值进行了硬编码，并且图表的格式很好。

现在我正在编写一个使用 JAXB 的 Web 服务，以使用 JSON 格式发送相同的数据。

{
"ordernumbertrack": [
{
  "state":1,
  "noOfCancellation": "12",
  "noOfOrder": "30"
},
{
  "state":2,
  "noOfCancellation": "7",
  "noOfOrder": "15"
},
{
  "state":3,
  "noOfCancellation": "15",
  "noOfOrder": "35"
},
{
  "state":4,
  "noOfCancellation": "5",
  "noOfOrder": "18"
},
{
  "state":5,
  "noOfCancellation": "10",
  "noOfOrder": "55"
},
{
  "state":6,
  "noOfCancellation": "8",
  "noOfOrder": "45"
},
{
  "state":7,
  "noOfCancellation": "5",
  "noOfOrder": "20"
},
{
  "state":8,
  "noOfCancellation": "6",
  "noOfOrder": "30"
},
{
  "state":9,
  "noOfCancellation": "4",
  "noOfOrder": "22"
},
{
  "state":10,
  "noOfCancellation": "17",
  "noOfOrder": "40"
},
{
  "state":11,
  "noOfCancellation": "2",
  "noOfOrder": "14"
},
{
  "state":12,
  "noOfCancellation": "5",
  "noOfOrder": "18"
}
]
}

我现在如何解析它？

【问题讨论】：

以哪种形式存储数据并不重要。 d3 适用于数组和对象，而不是 JSON 或 CSV。因此，数据来自哪里完全没有区别。无需将 CSV 文件转换为 JSON 文件。
我正在写一个web服务来发送json数据，那么它是如何工作的呢？
假设我正在生成这个 JSON -> {"ordernumbertrack": [{noOfCancellation": "12",noOfOrder": "30"},{noOfCancellation": "7","noOfOrder": "15"},{"noOfCancellation":"15","noOfOrder": "35"}]}
那是一个不同的问题。您真的只是想将这个 CSV 示例转换为 JSON 吗？您可以打开文本编辑器并手动编写文件，或者使用您喜欢的脚本语言来解析文件，将数据转换为 JSON 并将其保存到文件中。不确定您期望得到什么样的答案？
我不明白，评论中发布的 JSON 与您的其余问题有什么关系？

标签： javascript jquery json csv d3.js

【解决方案1】：

最后，我使用 JSON 数据创建了分组条形图。我已经编写了将 JSON 数据发送到 D3 的 Web 服务。

我的 JSON 与我在问题中发布的上述相同

只有我在 D3 中所做的改变是..

d3.json("rooturi/rest/ordernumbertracks", function(error, data) {
  var ageNames = d3.keys(data.ordernumbertrack[0]).filter(function(key) { return key !== "state";
});

data.ordernumbertrack.forEach(function(d) {
  d.ages = ageNames.map(function(name) { return {name: name, value: +d[name]}; });
});

x0.domain(data.ordernumbertrack.map(function(d) { return d.state; }));
x1.domain(ageNames).rangeRoundBands([0, x0.rangeBand()]);
y.domain([0, d3.max(data.ordernumbertrack, function(d) { return d3.max(d.ages, function(d) { return d.value; }); })]);

svg.append("g")
  .attr("class", "x axis")
  .attr("transform", "translate(0," + height + ")")
  .call(xAxis);

svg.append("g")
  .attr("class", "y axis")
  .call(yAxis)
.append("text")
  .attr("transform", "rotate(-90)")
  .attr("y", 6)
  .attr("dy", ".71em")
  .style("text-anchor", "end")
  .text("");

var state = svg.selectAll(".state")
  .data(data.ordernumbertrack)
.enter().append("g")
  .attr("class", "g")
  .attr("transform", function(d) { return "translate(" + x0(d.state) + ",0)"; });

没想到就这么简单:)

【讨论】：

太棒了！这对我有帮助