How to add a line on x-axis on a horizontal bar chart in d3

Question

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 plunker 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);

Answer 1

You don't need d3.svg.line() here. Just create a simple line:

    var lineEnd = 270;

    var line = svg.append("line")
      .attr("x1", lineEnd)
      .attr("x2", lineEnd)
      .attr("y1", 0)
      .attr("y2", height)
      .attr("stroke-width", 8)
      .attr("stroke", "black")
      .attr("stroke-dasharray", "8,8");

This is the plunker: http://plnkr.co/edit/dOhZjRvBHzFqWFByerKH?p=preview

PS: This is not 270 on x-axis, this is simply 270px on the SVG. Right now you cannot use x as a scale because there is no domain. Set a domain for x and use it to set the width of your bars.

First, get rid of this:

    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;

Now, set the scales:

var y = d3.scale.ordinal()
        .domain(info.map(function(d){ return d.name}))
        .rangeRoundBands([0, height], .1);

var x = d3.scale.linear()
       .range([0, width])
       .domain([0, d3.max(info, function(d){return d.value})])

And then use these scales for your bars:

.attr("x", 0)
.attr("y", function(d){ return y(d.name)})
.attr("width", function(d) {return x(d.value)})
.attr("height", y.rangeBand())

With all these corrected, now we can use 270 in the scale:

var line = svg.append("line")
      .attr("x1", function(){ return x(lineEnd)})
      .attr("x2", function(){ return x(lineEnd)})
      .attr("y1", 0)
      .attr("y2", height)
      .attr("stroke-width", 6)
      .attr("stroke", "black")
      .attr("stroke-dasharray", "8,8")

Here is the updated plunker: http://plnkr.co/edit/gtPA12qSf9mBoAY6MeDd?p=preview