javascript - How to add a fixed range vertical line to a D3.js chart - Stack Overflow

admin管理员组

文章数量:1307666

I am trying to add a vertical line on an existing line chart. My data looks likes this - column PC is a calculated percentage - and the vertical line should extend from 0 to 100 percent on the chart:

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 fine as follows where I have forced the range to be 0 to 100, since the data values do not actually cover the full 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 the vertical line, I try this:

 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 get it to extend in the same range from 0 to 100 percent that the axis does, as I fail to get this line right:

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

How do I make that set of y values cover the y value of all all the points on the chart corresponding to the percentages from 0 to 100?

I am trying to add a vertical line on an existing line chart. My data looks likes this - column PC is a calculated percentage - and the vertical line should extend from 0 to 100 percent on the chart:

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 fine as follows where I have forced the range to be 0 to 100, since the data values do not actually cover the full 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 the vertical line, I try this:

 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 get it to extend in the same range from 0 to 100 percent that the axis does, as I fail to get this line right:

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

How do I make that set of y values cover the y value of all all the points on the chart corresponding to the percentages from 0 to 100?

• javascript
• d3.js

Share Improve this question Follow asked Feb 1, 2015 at 18:11 gorilla5gorilla5 6311 silver badge55 bronze badges 10

• Use y(d.PC). i is the index of the item in the dataset, so probably not what you want here. – Lars Kotthoff Commented Feb 1, 2015 at 18:38
• Thank you. Yes, I had tried that. That does produce a vertical line, but it extends from 0 to 38% for the data I have given above, since 38 is the largest PC value. I would like to have the line extend to 100, which is the forced high value (ie there is no such actual value in the data) for the 0% to 100% range. – gorilla5 Commented Feb 1, 2015 at 19:03
• Add 100 to the data set at the appropriate position. – Lars Kotthoff Commented Feb 1, 2015 at 19:39
• Hmmm. If I add a point to the dataset with value of 100, that would add a false point to the actual line graph as far as I can see. Unless I filter it out, but that seems messy. I suppose, though, that I could create a separate dataset and base the vertical line y off that data. But it seems like there ought to be an easier or more direct way. – gorilla5 Commented Feb 1, 2015 at 21:02
• If I add a second, dummy dataset in order to extend the range to 100, I am also not sure how I would reference it, given that 'd' points to the actual dataset. – gorilla5 Commented Feb 1, 2015 at 21:14

 |  Show 5 more ments

1 Answer 1

Sorted by: Reset to default 9

You can do this by appending a separate line that has the appropriate y coordinates:

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

where the coordinates for x1 and x2 are the same and determine the position of the vertical line.

本文标签： javascriptHow to add a fixed range vertical line to a D3js chartStack Overflow