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

我正在努力探索D3的每一个方面。在探索过程中，我可以通过JSON（而不是CSV）读取文件

如果你能看到他们在用什么

我想用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"
}
]
}

---

现在如何解析它？

最后，我使用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)"; });

---

我不能期望它像那样简单：）

以何种形式存储数据并不重要。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是什么在评论中发表的评论与你的问题的其余部分有关吗？太棒了！这对我很有帮助

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