nvd3.js折线图 - 添加垂直线条

Question

我需要将几条垂直线（比如10或20）添加到nvd3折线图中。

问题here建议为此添加一系列，但我需要添加20个系列，过度拥挤图例和交互式工具提示。

根据我的理解，这可以开箱即用（如果我错了，请纠正我），所以我的问题是什么是最简单的这样做的方式：

1. 向DOM添加D3行（我将如何进行缩放，水平定位等等？）
2. 在nvd3
中添加对此的通用支持
3. 添加对图例和工具提示中隐藏特定系列的支持，并添加20系列
4. 还有其他想法吗？

Answer 1

嗯，事实证明 很难。我选择了选项＃3，以下代码更改为nv.d3.js完成了工作：

在legend模型中，更改

function chart(selection) {
    selection.each(function(data) {

...到

function chart(selection) {
    selection.each(function(dataUnfiltered) {
        var data = dataUnfiltered.filter(function (d) {
            return !d.disableLegend;
        });

并在lineChart模型中更改：

interactiveLayer.dispatch.on('elementMousemove', function(e) {
    lines.clearHighlights();
    var singlePoint, pointIndex, pointXLocation, allData = [];
    data
    .filter(function(series, i) {
      series.seriesIndex = i;
      return !series.disabled;
    })

...到

interactiveLayer.dispatch.on('elementMousemove', function(e) {
    lines.clearHighlights();
    var singlePoint, pointIndex, pointXLocation, allData = [];
    data
    .filter(function(series, i) {
      series.seriesIndex = i;
      return !series.disabled && !series.disableTooltip;
    })

（显然，必须对要支持的每个图表模型进行第二次更改，比如cumulativeLineChart和`stackedAreaChart）。

除了color，key，values等之外，您还可以指定disableTooltip: true和/或disableLegend: true。

希望这有助于某人。