After successfully creating an interactive line chart using nvd3, I am now looking to enhance it by adding an svg line to represent a baseline.
Within my function that constructs and displays the line chart, I have the following code:
function _buildGraph() {
nv.addGraph(function() {
chart = nv.models.lineChart()
.options({
duration: 300,
useInteractiveGuideline: true
});
chart.xAxis
.tickFormat(function(d) {
return null
})
.staggerLabels(false);
chart.yAxis
.tickFormat(function(d) {
if (d == null) {
return 'N/A';
}
return d3.format(',.1f')(d);
})
.tickValues([0.5, 1.5, 2.5, 3.5, 4.5, 5.5, 6.5, 7.5]);
data = _sortData();
// code for line goes here
d3.select('#potassium-profiler-container svg')
.datum(data)
.call(chart);
nv.utils.windowResize(chart.update);
return chart;
});
}
In order to insert the line, I have included the following code snippet within the function:
var line = d3.select('#potassium-profiler-container svg').append('line')
.attr('x1', chart.xAxis.scale()(0))
.attr('x2', chart.xAxis.scale()(100))
.attr('y1', chart.yAxis.scale()(4.5))
.attr('y2', chart.yAxis.scale()(4.5))
.attr('stroke-width', 2)
.attr('stroke', 'red')
Although I have set the y1 attribute to 4.5, the line appears to be slightly misplaced within the chart's SVG. Any assistance on understanding this discrepancy would be highly valued.
To view a simplified example of the issue, please check out this link.
Upon inspection, you will notice that the line is positioned slightly higher than intended, prompting me to consider the possibility of unknown margins affecting the placement.
Your insights and support in resolving this matter are greatly appreciated.