D3.js Bar Chart not loading bars

Question

This is my first time using D3.js, I adapted the code below from a tutorial and am pulling data from a .csv the axis are loading just fine, but for some reason the bar chart isnt rendering the bars? I'm sure it's something really simple.

Any help would really be much appreciated!

<!DOCTYPE html>
<meta charset="utf-8">
<style>

.bar {
  fill: steelblue;
}

.bar:hover {
  fill: brown;
}

.axis--x path {
  display: none;
}

</style>
<svg width="960" height="500"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>

var svg = d3.select("svg"),
    margin = {top: 20, right: 20, bottom: 30, left: 40},
    width = +svg.attr("width") - margin.left - margin.right,
    height = +svg.attr("height") - margin.top - margin.bottom;

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

var g = svg.append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

d3.csv("/dash/templates/dashing/Features.csv", function(d) {
  d.Used = +d.Used;
  return d;
}, function(error, data) {
  if (error) throw error;

  x.domain(data.map(function(d) { return d.Feature; }));
  y.domain([0, d3.max(data, function(d) { return d.Used; })]);

  g.append("g")
      .attr("class", "axis axis--x")
      .attr("transform", "translate(0," + height + ")")
      .call(d3.axisBottom(x));

  g.append("g")
      .attr("class", "axis axis--y")
      .call(d3.axisLeft(y).ticks(10, ))
    .append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", "0.71em")
      .attr("text-anchor", "end")
      .text("Feature");

  g.selectAll(".bar")
    .data(data)
    .enter().append("rect")
      .attr("class", "bar")
      .attr("x", function(d) { return x(d.Feature); })
      .attr("y", function(d) { return y(d.Used); })
      .attr("width", x.bandwidth())
      .attr("height", function(d) { return height - y(d.Feature); });
});

</script>

Answer 1

Your assumption is correct. A minor error in the code for calculating height of bars. You have to use return height - y(d.Used); instead of return height - y(d.Feature);

g.selectAll(".bar")
  .data(data)
  .enter().append("rect")
  .attr("class", "bar")
  .attr("x", function(d) {
    return x(d.Feature);
  })
  .attr("y", function(d) {
    return y(d.Used);
  })
  .attr("width", x.bandwidth())
  .attr("height", function(d) {
    return height - y(d.Used); //Updated Line
  });

 var svg = d3.select("svg"), margin = { top: 20, right: 20, bottom: 30, left: 40 }, width = +svg.attr("width") - margin.left - margin.right, height = +svg.attr("height") - margin.top - margin.bottom; var x = d3.scaleBand().rangeRound([0, width]).padding(0.1), y = d3.scaleLinear().rangeRound([height, 0]); var g = svg.append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); var data = [{ Feature: "Feature 1", Used: 10 }, { Feature: "Feature 2", Used: 20 }, { Feature: "Feature 3", Used: 15 }]; x.domain(data.map(function(d) { return d.Feature; })); y.domain([0, d3.max(data, function(d) { return d.Used; })]); g.append("g") .attr("class", "axis axis--x") .attr("transform", "translate(0," + height + ")") .call(d3.axisBottom(x)); g.append("g") .attr("class", "axis axis--y") .call(d3.axisLeft(y).ticks(10, )) .append("text") .attr("transform", "rotate(-90)") .attr("y", 6) .attr("dy", "0.71em") .attr("text-anchor", "end") .text("Feature"); g.selectAll(".bar") .data(data) .enter().append("rect") .attr("class", "bar") .attr("x", function(d) { return x(d.Feature); }) .attr("y", function(d) { return y(d.Used); }) .attr("width", x.bandwidth()) .attr("height", function(d) { return height - y(d.Used); });

 .bar { fill: steelblue; } .bar:hover { fill: brown; } .axis--x path { display: none; }

 <script src="https://d3js.org/d3.v4.min.js"></script> <svg width="960" height="500"></svg>

D3.js Bar Chart not loading bars

Question

1 answers

solution1
0 ACCPTED 2017-05-30 09:08:27

D3.js Bar Chart not loading bars

Question

1 answers

solution1 0 ACCPTED 2017-05-30 09:08:27

solution1
0 ACCPTED 2017-05-30 09:08:27