title: How to add a line on x-axis on a horizontal bar chart in d3
body: <p>I would like to add a line on my horizontal bar chart something like the image, the line should represent 270 on x-axis in this case, but I get the error invalid path attribute. Here is the <a href="http://plnkr.co/edit/WaDnDRIIWZotI3PrpUdN?p=info" rel="noreferrer">plunker code:</a>   </p>
  
  <pre><code> var info = [
       {name: "Walnuts",   value:206}, 
      {name: "Almonds",   value:332}
  
      ];
  
      /* Set chart dimensions */
      var width   = 960, 
          height  = 500,
          margin  = {top:10, right:10, bottom:20, left:60};
  
      //subtract margins
      width  = width  - margin.left - margin.right;
      height = height - margin.top  - margin.bottom;
  
      //sort data from highest to lowest
      info = info.sort(function(a, b){ return b.value - a.value; });
  
      //Sets the y scale from 0 to the maximum data element
  
  
      var max_n = 0;
      var category = []
              for (var d in info) {
                  max_n = Math.max(info[d].value, max_n);
                  category.push(info[d].name)
              }
  
              var dx = width / max_n;
              var dy = height / info.length;
  
     var y =   d3.scale.ordinal()
                          .domain(category)
                  .rangeRoundBands([0, height], .1);
  
      var x = d3.scale.linear()
             .range([0, width]);
  
  
      var yAxis = d3.svg.axis()
                  .scale(y)
                  .orient('left')
  
      var svg = d3.select("#chart")
          .append("svg")
          .attr("width", "100%")
          .attr("height", "100%")
          .attr('preserveAspectRatio', 'xMidYMin')
          .attr("viewBox", '0 0 ' + parseInt(width + margin.left + margin.right) + ' ' + parseInt(height + margin.top + margin.bottom))
          .append("g")
          .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
  
     svg.selectAll(".bar")
                  .data(info)
                  .enter()
                  .append("rect")
                  .attr("class", function(d, i) {return "bar" + d.name;})
                  .attr("x", function(d, i) {return 0;})
                  .attr("y", function(d, i) {return dy*i;})
                  .attr("width", function(d, i) {return dx*d.value})
                  .attr("height", dy)
                  .attr("fill", function(d, i){
                    if(d.name == 'Walnuts') {return 'red'} else {return 'green'}
                                              });
  
         var y_xis = svg.append('g')
                            .attr('id','yaxis')
                            .call(yAxis);
  
          var lineEnd = 270;
  
          var line = d3.svg.line()
          line
      .x(function(d, i) { 
        return x(d.value) + i; })
      .y(function(d, i) { return lineEnd; }); 
  
      svg.append("path")
        .datum(info)
        .attr("class", "line")
        .attr("d", line);
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/JIMMm.png" rel="noreferrer"><img src="https://i.stack.imgur.com/JIMMm.png" alt="enter image description here"></a></p>