javascript - 将 SVG 线条元素添加到折线图中

Question

使用nvd3，我创建了一个简单的交互式折线图。我现在想要向图表添加一条 svg line 以显示基线。

我有一个函数，在调用时会构建并放置折线图:

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

为了添加该行，我已将以下代码添加到上述函数中:

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')

鉴于我已将 y1 属性指定为 4.5，我希望线条元素从图表 svg 内的该位置开始。可悲的是，事实并非如此。

请参阅here举一个这个问题的最小例子。

正如您所看到的，该行实际上显示在比指定位置稍高的位置，所以我想知道是否可能有一些我没有理解的边距？

任何帮助将不胜感激。

Answer 1

更新了您的plunk 。图表是在已翻译的子组中绘制的。因此，您需要将您的行添加到该组(我所做的)，或者翻译相同数量的行(同步更困难):

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')