javascript - 条形图未按 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

你的图表对我有用除了这部分:

neither does the data appear on the y-axis

那是因为您还没有绘制 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 .