D3.js：如何从分组条形图中的JSON读取数据
我正在研究D3.js ，我正在探索D3的每个方面。 在探索分组条形图时，我可以通过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" } ] }
我现在该如何解析它？
最后，我使用JSON数据创建了Grouped Bar Chart。 我编写了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("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)"; });
我不能指望这就是那么简单:)