将SVG折线元素添加到折线图

Question

Using nvd3 , I've created a simple interactive line chart. I'm now wanting to add an svg line to the chart to show a baseline.

I have a function which when called, builds and places a line chart:

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();

    // line code added here 

    d3.select('#potassium-profiler-container svg')
      .datum(data)
      .call(chart);

    nv.utils.windowResize(chart.update);
    return chart;
  });
}

To add the line, I've added the following code to the above 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')

Given that I've specified the y1 attribute as 4.5, I would expect the line element to start from that position inside the chart svg. Sadly, this is not the case.

Please see here for a minimal example of the issue.

As you will see the line is actually displaying at a slightly higher position than specified so i'm wondering if maybe there's some margins that I have not comprehended?

Any help would be greatly appreciated.

Answer 1

Updated your plunk . The chart is drawn in a sub-group that is translated. You therefore need to add your line to that group (what I did), or translate your line of the same amount (harder for synchronization):

var line = d3.select('.nv-lineChart').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')