使用 D3 在 NVD3 折线图上绘制多边形

Question

我希望在 NVD3 折线图中围绕一条线绘制一个多边形，看起来像这样来显示一条线在两年之间如何变化：

困难在于，虽然我在使用 NVD3 内置功能来创建线条时没有问题，但我似乎无法弄清楚如何访问它为图表创建的比例，以便我使用纯文本绘制在顶部的数据D3 匹配已经存在的 X 和 Y 比例。

现在我的代码如下所示：

var chart;
var data;

d3.json("/data/someData.json", function(error, data) {

if (error) return console.warn(error);

nv.addGraph(function() {
  chart = nv.models.lineChart()
    .options({
      transitionDuration: 300,
      useInteractiveGuideline: true,
      forceX: [5000],
      forceY: [.18, .52],
      showLegend: true,
      xScale: d3.scale.linear()
    });

  chart.xAxis
    .axisLabel("Income")
    .tickFormat(d3.format('$,.d'));

  chart.yAxis
    .axisLabel('Average Tax (%)')
    .tickFormat(d3.format('.1%'));

  d3.select('#chart1').append('svg')
    .datum(data)
    .call(chart);

  nv.utils.windowResize(chart.update);
  return chart;

});

});

我需要做什么才能在这张图表上作画？

此外，是否有关于单击图例项时进行的 javascript 调用的文档？我想在 NVD3 图表之外创建进行相同调用的按钮，但我找不到对它们的引用。

Answer 1

如果您保留对图表对象的引用，则 d3 比例为 chart.xScale() 和 chart.yScale()。

要复制图例点击功能，您可以窃取事件处理函数并自己执行。

var clickHandler = d3.select('.nv-series').on('click');
// it needs to be called with the chart data
var myData = d3.select('.nv-groups').data();
// toggle second series...
clickHandler(myData[0][1]);

不过，这有点老套，在某些时候，您可能想考虑直接用d3 做整个图表。