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