使用D3 JS繪制條形圖

Question

我正在D3.js (Version 3)繪制條形圖。 它有兩個軸，一個是receive_data ，另一個是responses 。 我有一個存儲數據的JSON文件。 JSON格式看起來像

[{"receive_date":"2013-11-04","responses":"2"}]

在我的JSON中，我有兩個responses同一日期2013-11-04 responses值。 喜歡，

[{"receive_date":"2013-11-04","responses":"2"},{"receive_date":"2013-11-04","responses":"8668"}

這是JSON來源：-https: //api.myjson.com/bins/gdpu7

因此，當我繪制圖形時，它沒有采用相同的receive_date的值之和，而是顯示了兩次。 我希望它顯示responses的總和。 responses應為(8668+2) receive_date 2013-11-04

我還發現通過使用reduce可以做到這一點。 我嘗試使用d3.json.reduce 。 但是它顯示錯誤d3.json.reduce不是一個函數。

 var margin = { top: 20, right: 30, bottom: 30, left: 40 }, width = 960 - margin.left - margin.right, height = 500 - margin.top - margin.bottom; // scale to ordinal because x axis is not numerical var x = d3.scale.ordinal().rangeRoundBands([0, width], .1); //scale to numerical value by height var y = d3.scale.linear().range([height, 0]); var chart = d3.select("#chart") .append("svg") //append svg element inside #chart .attr("width", width + (2 * margin.left) + margin.right) //set width .attr("height", height + margin.top + margin.bottom); //set height var xAxis = d3.svg.axis() .scale(x) .orient("bottom"); //orient bottom because x-axis will appear below the bars var yAxis = d3.svg.axis() .scale(y) .orient("left"); d3.json("https://api.myjson.com/bins/gdpu7", function(error, data) { x.domain(data.map(function(d) { return d.receive_date })); y.domain([0, d3.max(data, function(d) { return d.responses })]); var bar = chart.selectAll("g") .data(data) .enter() .append("g") .attr("transform", function(d, i) { return "translate(" + x(d.receive_date) + ", 0)"; }); bar.append("rect") .attr("y", function(d) { return y(d.responses); }) .attr("x", function(d, i) { return x.rangeBand() + (margin.left / 2); }) .attr("height", function(d) { return height - y(d.responses); }) .attr("width", x.rangeBand()); //set width base on range on ordinal data bar.append("text") .attr("x", x.rangeBand() + margin.left) .attr("y", function(d) { return y(d.responses) - 10; }) .attr("dy", ".75em") .text(function(d) { return d.responses; }); chart.append("g") .attr("class", "x axis") .attr("transform", "translate(" + margin.left + "," + height + ")") .call(xAxis); chart.append("g") .attr("class", "y axis") .attr("transform", "translate(" + margin.left + ",0)") .call(yAxis) .append("text") .attr("transform", "rotate(-90)") .attr("y", 6) .attr("dy", ".71em") .style("text-anchor", "end") .text("responses"); }); function type(d) { d.receive_date = +d.receive_date; // coerce to number return d; } 

 #chart rect { fill: #4aaeea; } #chart text { fill: white; font: 10px sans-serif; text-anchor: end; } .axis text { font: 10px sans-serif; } .axis path, .axis line { fill: none; stroke: #fff; shape-rendering: crispEdges; } body { background: #1a1a1a; color: #eaeaea; padding: 10px; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="chart"></div> 

的jsfiddle： - https://jsfiddle.net/bL9940at/

Answer 1

相關部分：

  var array1 = data; //input
  var array2 = [];
  var last_d;
  array1.reduce(function (accumulator, currentValue, i) {
    var r = Number(currentValue.responses),
        d = currentValue.receive_date;
    if (d == last_d) r += accumulator;
    array2[i] = {
      receive_date: d,
      responses: r
    };
    last_d = d;
    return accumulator + Number(currentValue.responses);
  }, 0);
  data = array2; //output

 var margin = { top: 20, right: 30, bottom: 30, left: 40 }, width = 960 - margin.left - margin.right, height = 500 - margin.top - margin.bottom; // scale to ordinal because x axis is not numerical var x = d3.scale.ordinal().rangeRoundBands([0, width], .1); //scale to numerical value by height var y = d3.scale.linear().range([height, 0]); var chart = d3.select("#chart") .append("svg") //append svg element inside #chart .attr("width", width + (2 * margin.left) + margin.right) //set width .attr("height", height + margin.top + margin.bottom); //set height var xAxis = d3.svg.axis() .scale(x) .orient("bottom"); //orient bottom because x-axis will appear below the bars var yAxis = d3.svg.axis() .scale(y) .orient("left"); d3.json("https://api.myjson.com/bins/gdpu7", function(error, data) { //create new arrays var array1 = data; //input var array2 = []; var last_d; array1.reduce(function (accumulator, currentValue, i) { var r = Number(currentValue.responses), d = currentValue.receive_date; if (d == last_d) r += accumulator; array2[i] = { receive_date: d, responses: r }; last_d = d; return accumulator + Number(currentValue.responses); }, 0); data = array2; //output x.domain(data.map(function(d) { return d.receive_date; })); y.domain([0, d3.max(data, function(d) { return d.responses; })*1.1]); var bar = chart.selectAll("g") .data(data) .enter() .append("g") .attr("transform", function(d, i) { return "translate(" + x(d.receive_date) + ", 0)"; }); bar.append("rect") .attr("y", function(d) { return y(d.responses); }) .attr("x", function(d, i) { return x.rangeBand() + (margin.left / 2); }) .attr("height", function(d) { return height - y(d.responses); }) .attr("width", x.rangeBand()); //set width base on range on ordinal data bar.append("text") .attr("x", x.rangeBand() + margin.left) .attr("y", function(d) { return y(d.responses) - 10; }) .attr("dy", ".75em") .text(function(d) { return d.responses; }); chart.append("g") .attr("class", "x axis") .attr("transform", "translate(" + margin.left + "," + height + ")") .call(xAxis); chart.append("g") .attr("class", "y axis") .attr("transform", "translate(" + margin.left + ",0)") .call(yAxis) .append("text") .attr("transform", "rotate(-90)") .attr("y", 6) .attr("dy", ".71em") .style("text-anchor", "end") .text("responses"); }); function type(d) { d.receive_date = +d.receive_date; // coerce to number return d; } 

 #chart rect { fill: #4aaeea; } #chart text { fill: white; font: 10px sans-serif; text-anchor: end; } .axis text { font: 10px sans-serif; } .axis path, .axis line { fill: none; stroke: #fff; shape-rendering: crispEdges; } body { background: #1a1a1a; color: #eaeaea; padding: 10px; } 

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> </head> <body> <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script> <script src="https://code.jquery.com/jquery-git.js"></script> <div id="chart"></div> </body> </html>