d3.js - NVD3 堆积面积图

Question

堆积面积图示例 http://nvd3.org/ghpages/stackedArea.html

当我点击一个系列时，它会扩展到所有图表区域，删除其他系列。如何禁用此功能？

Answer 1

没有任何 NVD3 图表选项可以覆盖此行为，但您可以直接覆盖点击事件处理程序。但是，使用堆积面积图会变得有点复杂...

NVD3 使用 d3.dispatch对象来处理自定义事件。用户点击和鼠标悬停以及相关操作都被转换为这些自定义事件。

如果你想让一个函数在自定义事件之后发生，你可以调用调度对象的.on(eventName, function)方法。如果函数参数为 null，它会取消任何以前附加到该名称的事件处理函数。 (如果你想让同一个事件触发多个函数，你可以在事件名称中添加一个“命名空间”，使用“eventName.namespace”形式的字符串作为第一个参数；即只有当 on 使用完全相同的事件名称字符串再次调用时，函数才会被取消。)

所以要取消你不想要的行为，你需要检查源代码找出触发该行为的自定义事件的名称，并调用调度对象的 on具有该名称和空函数的方法。

这就是事情变得复杂的地方。实际上有多个不同的事件会导致数据系列打开和关闭。如果您单击该区域，如果您单击图例，或者如果您单击鼠标悬停时出现的散点圆之一，您将获得相同的行为。所以所有这些事件都必须被覆盖。而且它们甚至不是同一个调度对象的所有部分:主图表对象本身有一个调度对象来处理通过单击图表布局控件创建的完整重绘事件，但堆叠区域上的单击事件由内部处理绘制绘图区域的图表函数，散点上的点击事件由其中的内部图表函数处理，图例上的点击事件在图例函数中处理。

这就是它变得真正复杂的地方。当整个图表更新或其布局发生变化时，绘图区域和散点图的那些内部图表绘制函数会被主图表函数覆盖。这意味着所有事件都将重置为其 NVD3 默认值。

因此，您不仅必须禁用所有触发该行为的事件，还必须修改更新函数以再次禁用它们。并且由于更新函数本身在每次更新时都会重置，*您需要将更新函数的修改作为用于禁用事件的函数的一部分。

**更新函数只是使用相同的容器选择重新调用整个图表绘制函数。图表函数的第一行之一创建了更新函数。*

这是代码，基于 nvd3.org live code page 上的 Stacked Area 示例:

nv.addGraph(function() {

  /* Set up chart as normal */
  var chart = nv.models.stackedAreaChart()
                .x(function(d) { return d[0] })
                .y(function(d) { return d[1] })
                .clipEdge(true)
                //.useInteractiveGuideline(true)
      ;

  chart.xAxis
      .showMaxMin(false)
      .tickFormat(function(d) { return d3.time.format('%x')(new Date(d)) });

  chart.yAxis
      .tickFormat(d3.format(',.2f'));

  d3.select('#chart svg')
    .datum(data)
      .transition().duration(500).call(chart);

  /* create a function to disable events and modify the update function */
  function disableAreaClick() {

    //I'm probably over-killing with the amount of events I'm cancelling out
    //but it doesn't seem to have any side effects:
    chart.stacked.dispatch.on("areaClick", null);
    chart.stacked.dispatch.on("areaClick.toggle", null);

    chart.stacked.scatter.dispatch.on("elementClick", null);
    chart.stacked.scatter.dispatch.on("elementClick.area", null);

    chart.legend.dispatch.on("legendClick", null);
    chart.legend.dispatch.on("legendDblclick", null);
    chart.legend.dispatch.on("stateChange", null);

    if (chart.update) {
       //if the chart currently has an update function
       //(created when the chart is called on a container selection)
       //then modify it to re-call this function after update

       var originalUpdate = chart.update; 
           //assign the update function to a new name

       chart.update = function(){
          originalUpdate();
          disableAreaClick();
       }
    }
  } 

  //Call your function, disabling events on current chart and future updates:
  disableAreaClick();
  //this must be called *after* calling the chart on a selection
  //so that it has an update function to modify

  nv.utils.windowResize( chart.update );

  return chart;
});