NVD3 line chart with vertical line - svg

Question

I'm trying to generate a linechart in NVD3 with a vertical line. Particularly this kind of line chart.
The linechart has two panels a viewing panel and a zoom panel, I would want the line to be on both.
Something like this:
Is this feasible?
Edit:
I found out a way to do this by just appending to the data an extra stream which represents a line. e.g.
streams[3] = {key:'myline', values:[{x:68,y:0},{x:68,y:7}]}
Is there a better way?

Answer 1

Yes it's possible,
Here is an example of how to do it :
https://gist.github.com/timelyportfolio/80d85f78a5a975fa29d7#file-code-r
The solution here is to add a javascript function drawing vertical lines using NVD3 ( read carefully the comments ) :
function drawVerticalLines(opts) {
// CAREFUL HERE !!! the css pasth ".nvd3 .nv-focus .nv-linesWrap" depends on the type of chart you are using, lineChart would use only ".nvd3 .nv-linesWrap" ... !
if (!(d3.select('#' + opts.id + ' the css pasth ".nvd3 .nv-focus .nv" depends on the type of chart you are using, lineChart would use only -linesWrap').select('.vertical-lines')[0][0])) {
// Adds new g element with .vertical-lines class; use a css debugger to verify
d3.select('#' + opts.id + ' .nvd3 .nv-focus .nv-linesWrap').append('g')
.attr('class', 'vertical-lines')
}
vertLines = d3.select('#' + opts.id + ' .nvd3 .nv-focus .nv-linesWrap').select('.vertical-lines').selectAll('.vertical-line')
.data(
[{
'date': new Date('1967-11-30'),
'label': 'something to highlight 1967'
}, {
'date': new Date('2001-11-30'),
'label': 'something to highlight 2001'
}])
var vertG = vertLines.enter()
.append('g')
.attr('class', 'vertical-line')
vertG.append('svg:line')
vertG.append('text')
vertLines.exit().remove()
// CAREFUL 2 : chart.xAxis.scale() scale depends how you are defining your x Axis in nvd3 chart ... if your are using timestamps, (d.date / 60 / 60 / 24 / 1000) becomes (d.date)
vertLines.selectAll('line')
.attr('x1', function(d) {
return chart.xAxis.scale()(d.date / 60 / 60 / 24 / 1000)
})
.attr('x2', function(d) {
return chart.xAxis.scale()(d.date / 60 / 60 / 24 / 1000)
})
.attr('y1', chart.yAxis.scale().range()[0])
.attr('y2', chart.yAxis.scale().range()[1])
.style('stroke', 'red')
vertLines.selectAll('text')
.text(function(d) {
return d.label
})
.attr('dy', '1em')
//x placement ; change dy above for minor adjustments but mainly
// change the d.date/60/60/24/1000
//y placement ; change 2 to where you want vertical placement
//rotate -90 but feel free to change to what you would like
.attr('transform', function(d) {
return 'translate(' +
chart.xAxis.scale()(d.date / 60 / 60 / 24 / 1000) +
',' +
chart.yAxis.scale()(2) +
') rotate(-90)'
})
//also you can style however you would like
//here is an example changing the font size
.style('font-size', '80%')
}
And call this method in nv.addGraph Callback :
var sharedChart = null; // Shared reference on the chart
nv.addGraph(function() {
.....
sharedChart = chart;
return chart;
,
function() {
drawVerticalLines(opts, sharedChart);
}
);
With opts ... (obviously you don't really need it):
var opts${widgetID.replace('-', '0')} = {
"dom": "chart${widgetID}",
"width": 800,
"height": 400,
"x": "date",
"y": "value",
"group": "variable",
"type": "lineWithFocusChart",
"id": "chart${widgetID}"
};
Hope this helps, it took me quite a long time to find it and to make it work !