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，我希望line元素从图表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线元素添加到折线图

1 个答案: