使用 D3 JS 绘制条形图

Question

我正在D3.js (Version 3) 中绘制条形图。它有两个轴，一个是receive_data，另一个是responses。我有一个存储数据的 JSON 文件。 JSON 格式看起来像，

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

在我的 JSON 中，我有两个 responses 相同日期的值 2013-11-04 。 喜欢，

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

这是 JSON 源代码：- https://api.myjson.com/bins/gdpu7

所以，当我绘制图表时，它不会取同一个 receive_date 的值的总和，而是显示两次。我希望它显示responses 的总和。对于receive_date 2013-11-04，responses 应该是 (8668+2)

我还发现通过使用reduce 我们可以做到这一点。我尝试使用 d3.json.reduce 。但它显示错误d3.json.reduce is not a function。

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>