条形图未按d3.JS预期进行渲染

Question

I started visualizing data I had extracted using pandas. I've checked out the d3.js tutorials and examples and decided to write a simple bar chart, but what is rendering is not in accordance to the data i have in csv format. The label on the y-axis doesn't appear,neither does the data appear on the y-axis. One of the fields on the x-axis doesn't even have data visualizing.

 < 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/

Please, what exactly am I missing?

Answer 1

It's tough to answer this without seeing your data but assuming it looks something like this (at a minimum):

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

Your chart works for me except for this part:

neither does the data appear on the y-axis

And that's because you haven't drawn the y-axis. Since you are working with canvas , it would look something like:

  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));
  });

Here's a full running example .