title: Appending lines to D3 bar chart - absolutely nothing happens
body: <p>I have an otherwise fine working grouped bar chart script to which I'm trying to add simple reference lines. The relevant code:</p>
  
  <pre><code>//Set up margins and dimensions according to http://bl.ocks.org/3019563
  var margin = {top: 20, right: 10, bottom: 20, left: 30},
      width = 810 - margin.left - margin.right,
      height = 500 - margin.top - margin.bottom;
  
  /* Set up the primary x scale */
  var x0 = d3.scale.ordinal()
      .rangeRoundBands([0, width], .1)
      .domain(data.map(function (d) {
          return options.xPrimaryScaleAccessor(d);
      }));
  
  /* Set up the secondary x scale */
  var x1 = d3.scale.ordinal()
      .domain(xSecondaryScaleValues)
      .rangeRoundBands([0, x0.rangeBand()]);
  
  /* Set up the y scale as a linear (continous) scale with a total range of 0 - full height and a domain of 0-100 */
  var y = d3.scale.linear()
      .range([height, 0])
      .domain([0, 100]);
  
  /* Set up a color space of 20 colors */
  var color = d3.scale.category20();
  
  /* Set up the x axis using the primary x scale and align it to the bottom */
  var xAxis = d3.svg.axis()
      .scale(x0)
      .orient("bottom");
  
  /* Set up the y axis using the y scale and align it to the left */
  var yAxis = d3.svg.axis()
      .scale(y)
      .orient("left");
  
  /* Create an SVG element and append it to the body, set its dimensions, append a &lt;g&gt; element to
   * it and apply a transform translating all coordinates according to the margins set up. */
  var svg = d3.select(options.target).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 + ")");
  
  //Create a space for definitions
  var defs = svg.append("defs");
  
  setupDropShadowFilter(defs, 3, 3, 3); //Sets up a gaussian blur filter with id 'drop-shadow'
  
  /* Append a &lt;g&gt; element to the chart and turn it into a representation of the x axis */
  svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis);
  
  /* Append a &lt;g&gt; element to the chart and turn it into a representation of the y axis */
  svg.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(options.yLabel);
  
  var dataArr = y.ticks(yAxis.ticks());
  
  /* Draw the reference lines */  
  svg.selectAll("line")
     .data(dataArr)
     .enter().append("line")
     .attr("x1", 0)
     .attr("x2", width)
     .attr("y1", y)
     .attr("y2", y)
     .style("stroke", "#ccc");
  
  /* Set up the bar groups */
  var group = svg.selectAll(".group")
      .data(data)
      .enter().append("g")
      .attr("class", "g")
      .attr("transform", function(d) { return "translate(" + x0(options.xPrimaryScaleAccessor(d)) + ",0)"; });
  
  /* Draw the bars */
  group.selectAll("rect")
      .data(options.valueAccessor)
      .enter().append("rect")
      .attr("width", x1.rangeBand())
      .attr("x", function(d) { return x1(d.label); })
      .attr("y", function(d) { return y(d.value); })
      .attr('rx', options.barCornerRadius)
      .attr('ry', options.barCornerRadius)
      .attr("height", function(d) { return height - y(d.value); })
      .style("fill", function(d) { return getStripedPattern(defs, color(d.label)); //Sets up a pattern and returns its ID })//Todo: fill with pattern instead. see http://tributary.io/tributary/2929255
      .style("filter", "url(#drop-shadow)");
  
  /* Draw a legend */
  var legend = svg.selectAll(".legend")
      .data(xSecondaryScaleValues)
      .enter().append("g")
      .attr("class", "legend")
      .attr("transform", function(d, i) { return "translate(0," + (xSecondaryScaleValues.length-i-.25) * (height/xSecondaryScaleValues.length) + ")"; });
  
  legend.append("rect")
      .attr("x", width - 9)
      .attr("width", 18)
      .attr("height", 18)
      .style("fill", color);
  
  legend.append("text")
      .attr("y", 9)
      //.attr("dy", ".35em")
      .attr("transform", "translate(" + (width - 6) + ",-8)rotate(-90)" )
      .style("text-anchor", "start")
      .text(function(d) { return d; });
  </code></pre>
  
  <p>EDIT: I have also tried to append <code>rect</code> elements instead with hardcoded coordinates and dimensions, but those also didn't make it to the DOM.</p>
  
  <p>EDIT 2: More or less full code now included.</p>
  
  <p>Basically, nothing happens. No lines are appended and there are no errors in the console. The dataArr is a plain array of numbers and <code>y(number)</code> is confirmed to return good values in the output range.</p>
  
  <p>I think (and debug suggests) that the chain dies at the <code>append()</code> stage, possibly because <code>.enter()</code> return something useless.</p>
  
  <h3>Console log after <code>.data()</code>:<br></h3>
  
  <p><img src="https://i.stack.imgur.com/OTYMB.png" alt="Console log after .data()"><br></p>
  
  <h3>Console log after <code>.enter()</code>:<br></h3>
  
  <p><img src="https://i.stack.imgur.com/hyCWw.png" alt="Console log after .enter()"></p>
  
  <h3>Console log after <code>.append()</code>:<br></h3>
  
  <p><img src="https://i.stack.imgur.com/O3Js5.png" alt="Console log after .append():"></p>
  
  <p>I've been stuck on this for a good while now, so grateful for any ideas about what may go wrong. I'm sure I'm overlooking something obvious...</p>