score:5

Accepted answer

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


Related Query

More Query from same tag