nvd3.js 折线图——添加垂直线

Question

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

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。

希望这对某人有所帮助。