条形图在d3.JS中未按预期呈现

Question

我开始可视化我使用pandas提取的数据。我已经查看了d3.js教程和示例，并决定写一个简单的条形图，但呈现的内容与我拥有的csv格式的数据不一致。Y轴上的标签不会出现，数据也不会出现在y轴上。X轴上的一个字段甚至没有数据可视化。

​

< script type = "text/javascript" >
  var canvas = document.querySelector("canvas");
var context = canvas.getContext("2d");
// Set the dimensions of the canvas / graph
var margin = {
    top: 20,
    right: 20,
    bottom: 30,
    left: 50
  },
  width = canvas.width - margin.left - margin.right,
  height = canvas.height - margin.top - margin.bottom;


var x = d3.scaleBand()
  .rangeRound([0, width])
  .padding(0.1);

var y = d3.scaleLinear()
  .rangeRound([height, 0]);

context.translate(margin.left, margin.top);

d3.csv("data/ecci.csv", function(data) {
  data.forEach(function(d) {
    d.NGNAmountCashBalance = +d.NGNAmountCashBalance;
    d.Region = d.Region;
  });
  console.log(data[5]);
  x.domain(data.map(function(d) {
    return d.Region;
  }));
  y.domain([0, d3.max(data, function(d) {
    return d.NGNAmountCashBalance;
  })]);

  context.beginPath();
  x.domain().forEach(function(d) {
    context.moveTo(x(d) + x.bandwidth() / 2, height);
    context.lineTo(x(d) + x.bandwidth() / 2, height + 6);
  });

  context.strokeStyle = "black";
  context.stroke();

  context.textAlign = "center";
  context.textBaseline = "top";
  x.domain().forEach(function(d) {
    context.fillText(d, x(d) + x.bandwidth() / 2, height + 6);
  });

  context.beginPath();

  context.strokeStyle = "black";
  context.stroke();

  context.textAlign = "right";
  context.textBaseline = "middle";

  context.beginPath();
  context.moveTo(-6.5, 0 + 0.5);
  context.lineTo(0.5, 0 + 0.5);
  context.lineTo(0.5, height + 0.5);
  context.lineTo(-6.5, height + 0.5);
  context.strokeStyle = "black";
  context.stroke();

  context.save();
  context.rotate(-Math.PI / 2);
  context.textAlign = "right";
  context.textBaseline = "top";
  context.font = "light 13px verdana";
  context.fillText("ACCIS Chart", -10, 10);
  context.restore();

  context.fillStyle = "steelblue";
  data.forEach(function(d) {
    context.fillRect(x(d.Region), y(d.NGNAmountCashBalance), x.bandwidth(), height - y(d.NGNAmountCashBalance));
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.5/d3.min.js"></script>
<canvas width="660" height="500"></canvas>

​

JSFiddle - https://jsfiddle.net/gbade/o11d5tb8/

我到底错过了什么？

Answer 1

在看不到你的数据的情况下，很难回答这个，但假设它看起来像这样(至少)：

NGNAmountCashBalance,Region
10,One
20,Two
30,Three
40,Four

你的图表适用于我，除了这一部分的：

数据也不会出现在y轴上

这是因为你还没有画出y轴。由于您使用的是canvas，因此它看起来如下所示：

  var yTickCount = 5,
      yTicks = y.ticks(yTickCount);

  context.beginPath();
  yTicks.forEach(function(d) {
    context.moveTo(0, y(d) + 0.5);
    context.lineTo(-6, y(d) + 0.5);
  });
  context.strokeStyle = "black";
  context.stroke();

  context.textAlign = "right";
  context.textBaseline = "middle";
  yTicks.forEach(function(d) {
    context.fillText(d, -9, y(d));
  });

这是一个完整的running example。