Can't add anything to my d3 bar graph

Question

Here is a simplified, for-the-public's-eyes version of my bar graph. I can't seem to add anything to it. I was following this tutorial trying to add the vertical lines from the x-axis and the text inside each bar to my graph, neither of which are showing up. Basically nothing really shows up that I try to add, but I was able to add the x-axis line which you can see in graph.js @ line 65. You can see where I tried adding lines to the graph in my code at line 56 in graph.js. The x values are arbitrary as I was just trying to get them to show up. What am I doing wrong?

Answer 1

The problem is that your selector, "line", is not specific enough. There are already 'line' elements in the document; they form the axis ticks.

Because of that, your code is doing the following. It selects the existing line elements and binds the data your provided to those elements. Since those elements already existed, the enter() selection will be empty. This means that your append("line") command will never be executed:

        var lines = svg.selectAll("line")
            .data(data)
            .enter().append("line")

You can provide more specificity by adding a class. For example the following should work:

var lines = svg.selectAll("line.rules")
    .data(data)
  .enter().append("line")
    .attr("class", "rules");

More about the enter, update, and exit selections can be found in Mike's article Thinking with Joins .