使用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进行整个图表。