nvd3.js line chart -- add vertical lines - d3.js

Question

I need to add several vertical lines (say 10 or 20) to an nvd3 line chart.
The question here suggests adding a series for this, but I would need to add 20 series, overcrowding the legend and the interactive tooltip.
From what I understand this can't be done out-of-the-box (please correct me if I'm wrong), so my question is what is the easiest way of doing this:
Add D3 lines to the DOM (how would I go about scale, positioning them horizontally, etc?)
Add generic support for this in nvd3
Add support for hiding specific series from the legend and from the tooltip, and add 20 series
Any other idea?

Answer 1

Well, it turns out that it wasn't that hard. I chose option #3, and the following code changes to nv.d3.js got the job done:
In the legend model, change
function chart(selection) {
selection.each(function(data) {
... to
function chart(selection) {
selection.each(function(dataUnfiltered) {
var data = dataUnfiltered.filter(function (d) {
return !d.disableLegend;
});
and in the lineChart model, change:
interactiveLayer.dispatch.on('elementMousemove', function(e) {
lines.clearHighlights();
var singlePoint, pointIndex, pointXLocation, allData = [];
data
.filter(function(series, i) {
series.seriesIndex = i;
return !series.disabled;
})
... to
interactiveLayer.dispatch.on('elementMousemove', function(e) {
lines.clearHighlights();
var singlePoint, pointIndex, pointXLocation, allData = [];
data
.filter(function(series, i) {
series.seriesIndex = i;
return !series.disabled && !series.disableTooltip;
})
(Obviously this second change would have to be done to each chart model you want to support, say also cumulativeLineChart and `stackedAreaChart).
This will enable you to specify, in addition to color, key, values, etc. also disableTooltip: true and/or disableLegend: true.
Hope this helps someone.