Bars not appending in the DOM with d3.js barchart

Question

I am attempting to build a very basic bar chart. Three bars. The data is correct. However, the bars do not display, nor are they showing up when I inspect the barchart with dev tools. However, the x-axis and y-axis render correctly, with the correct labels and tick marks.

function buildBarChart(data) {
  var margin = {top: 20, right: 20, bottom: 30, left:40},
      width = 960 - margin.left - margin.right,
      height = 500 - margin.top - margin.bottom;

  var x = d3.scale.ordinal()
    .rangeRoundBands([0, width], .1);
  var y = d3.scale.linear()
    .range([height, 0]);

  var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom");

  var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left");

  var chart = d3.select(".barchart").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

  var mapped_values = _.map(data, function(d) {
    return d.count;
  });

  x.domain(d3.keys(data));
  y.domain([0, d3.max(mapped_values)]);

  chart.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis);

  chart.append("g")
    .attr("class", "y axis")
    .call(yAxis)
    .append("text")
    .attr("transform", "rotate(-90)")
    .attr("y", 6)
    .attr("dy", ".71em")
    .style("text-anchor", "end")
    .text("Count");

  _.each(data, function(d) {
    console.log(d.name + " ++ " + (height - y(d.count)) + " ++ " + d.count);
  });

  chart.selectAll(".bar")
    .data(data)
    .enter().append("rect")
    .attr("class", "bar")
    .attr("x", function(d) { return x(d.name) })
    .attr("width", x.rangeBand())
    .attr("y", function(d) { return y(d.count); })
    .attr("height", function(d) { return height - y(d.count); });
};

The result of the console.log above is:

quotes ++ 90 ++ 16
subscriptions ++ 450 ++ 80
sponsored_licenses ++ 45 ++ 8

which is correct. I have been starting at this for hours and cannot figure out why everything displays (including the line charts on the same page) except for the bars.

Why are my bars not displaying?

Answer 1

The data you assign to a selection has to be an array , not a key:value object. You can use the d3.values(object) utility function to extract just the values as an array.

chart.selectAll(".bar")
  .data(d3.values(data))
  /* etc. */

However, the key values for the objects are no longer available in that form, and I notice that you're using them for the x-axis. If the keys are the same as the "name" of the data object that shouldn't be a problem. If not, the d3.entries() utility function returns both keys and values, but the values become a nested object, so you'd have to use d.value.name and d.value.count to access the original data.