Geek Answers Handbook

How to add a fixed line vertical line to a D3.js chart

I am trying to add a vertical line to an existing line chart. My data looks like this: the PC table is the calculated percentage, and the vertical line should be from 0 to 100 percent on the graph:

var data = [
{"Month":"2014-06" , "PC" : 38 , "items" : 72 }, 
{"Month":"2014-07" , "PC" : 33 , "items" : 68 }, 
{"Month":"2014-08" , "PC" : 28 , "items" : 80 }, 
{"Month":"2014-09" , "PC" : 16 , "items" : 93 }
]

I build the y axis exactly as follows, where I set the range to be from 0 to 100, since the data values ​​do not actually cover the entire range:

var y = d3.scale.linear()
.range([height, 0], 0.5);
y.domain([0, 100]);
var yAxis = d3.svg.axis().scale(y).orient("left").tickFormat(function(d) { return d + "%"; }).ticks(10);

To create a vertical line, I try:

 var linev = d3.svg.line()
    .x(function(d, i) { 
      return x(data[2].Month); })
.y(function(d, i) { return y(i); }); 

 svgx.append("path")
      .datum(data)
    .style("fill", "none")
     .style("stroke", "black")
    .style("stroke-width", "1px")
      .attr("d", linev);
}

The line forms, but I cannot force it to expand in the same range from 0 to 100 percent as the axis, since I cannot get this line correctly:

.y (function (d, i) {return y (i);});

How can I make sure that the set of y values ​​covers the y value of all all the points in the diagram corresponding to percentages from 0 to 100?

+4
1

, y:

svg.append("line")
   .attr("y1", y(0))
   .attr("y2", y(100))
   .attr("x1", ...)
   .attr("x2", ...)

x1 x2 .

+7

More articles:


All Articles