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

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

Adding SVG line element to line chart

javascript

svg

d3.js

nvd3.js