D3.js：如何从分组条形图中的JSON读取数据 [英] D3.js : How to read data from JSON in Grouped Bar Chart

问题描述

我正在研究 D3.js ，我正在探索D3的每个方面。在探索分组条形图时，我可以通过JSON（而不是通过CSV）读取文件。 p>

如果您可以在分组条形图中看到他们正在使用 data.csv

 州，5岁以下，5至13岁，14至17岁，18至24岁，25至44岁，45至64岁
 65年和超过
 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文件并生成相同的图？请帮助。

EDIT / p>

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

 州，订单，放弃
 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 
  

所以这里我硬编码所有的值，并且graph是一个漂亮的格式。 >

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

  {
ordernumbertrack：[
 {
state：1，
noOfCancellation：12，
noOfOrder：30
}，
 {
state：2，
noOfCancellation ：7，
noOfOrder：15
}，
 {
state：3，
noOfCancellation：15 b $ bnoOfOrder：35
}，
 {
state：4，
noOfCancellation：5，
noOfOrder ：18
}，
 {
state：5，
noOfCancellation：10，
noOfOrder：55 $ b}，
 {
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 ，
noOfOrder：14
}，
 {
state：12，
noOfCancellation：5，
 noOfOrder：18
} 
] 
} 
  

解决方案

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

我的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 ，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）{returntranslate（+ x0（d.state）+，0）;}）; 
  

我不能指望它是那么简单：）

I am working on D3.js where I am exploring each and every aspects of D3. While Exploring Grouped Bar Chart I can across to read file through JSON (not via CSV).

If you can see in Grouped Bar Chart they are using 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

I want to build the same graph but with JSON file. How can I convert this CSV file to JSON file and generate the same graph? please help.

EDIT

I customize this graph accoring to my Need. Here is my 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

So here I have hard coded all the values, and graph is coming out in a nice format.

Now I am writing a web services using JAXB to send same data using JSON format.

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

How can I parse it now ?

解决方案

Finally I created Grouped Bar Chart using JSON data. I have written web services which will send JSON data to D3.

My JSON is same as above I posted in Question

Only the change I have done in D3 is ..

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

I can't expect It is as simple as that :)

这篇关于D3.js：如何从分组条形图中的JSON读取数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！