NVD3堆积面积图 [英] NVD3 Stacked Area Chart

问题描述

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

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

When I click on a series, it expands to all chart area, removing other series. How do I disable this functionality?

推荐答案

没有任何NVD3图表选项可以替代此行为，但是您可以直接替代click事件处理程序.但是，堆积面积图使它变得有点复杂...

There isn't any NVD3 chart option to over-ride this behaviour, but you can over-ride the click event handler directly. However, it gets a little complicated with the stacked area chart...

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

NVD3 uses a d3.dispatch object to handle custom events. User clicks and mouseovers and related actions are all converted into these custom events.

如果希望函数在自定义事件后发生，则可以调用分派对象的.on(eventName, function)方法.如果功能参数为null，它将取消附加到该名称的所有以前的事件处理功能. (如果您希望同一事件触发多个功能，则可以通过使用形式为"eventName.namespace"的字符串作为第一个参数，在事件名称中添加名称空间"；然后，仅当将使用完全相同的事件名称字符串再次调用.)

If you want a function to happen after a custom event, you can call the dispatch object's .on(eventName, function) method. If the function parameter is null, it cancels out any previous event handling functions attached to that name. (If you want multiple functions to be triggered by the same event, you can add a "namespace" to the event name by using a string of the form "eventName.namespace" as the first parameter; that function will then only be cancelled if on is called again with the exact same event name string.)

因此，要取消不需要的行为，您需要检查源代码以找出触发该行为的自定义事件的名称，并使用该名称调用调度对象的on方法，并空函数.

So to cancel out a behaviour you don't want, you need to check the source code to figure out the name of the custom event that is triggering that behaviour, and call the dispatch object's on method with that name and a null function.

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

Here's where it gets complicated. There are actually multiple different events that cause a data series to be toggled on and off. If you click on the area, if you click on the legend, or if you click on one of the scatterpoint circles that appear when you mouseover, you get the same behaviour. So all of those events have to be over-written. And they're not even all part of the same dispatch object: The main chart object itself has a dispatch object that handles the complete redraw events created by clicking the chart layout controls, but the click events on the stacked areas are handled by an internal charting function that draws the plotting area, the click events on the scatterpoints are handled by an internal charting function within that, and the click events on the legend are handled within the legend function.

这就是真的复杂的地方.当更新整个图表或更改其布局时，用于绘图区域和散点图的那些内部图表绘制功能将被主要图表功能所覆盖.这意味着所有事件都将重置为它们的NVD3默认值.

And here's where it gets really complicated. When the chart as a whole is updated or its layout changed, those internal chart-drawing functions for the plotting area and the scatterplot get over-written by the main chart function. Which means all the events get reset to their NVD3 defaults.

因此，您不仅必须禁用所有触发行为的事件，而且还必须修改更新功能以再次禁用所有事件.而且由于更新功能本身在每次更新时都会重置，*您需要将对更新功能的修改作为用于禁用事件的功能的一部分包括在内.

So not only do you have to disable all the events that trigger the behaviour, you also have to modify the update function to disable them all again. And because the update function itself is reset every update,* you need to include the modification of the update function as part of the function you use to disable the events.

**更新功能只是使用相同的容器选择来调用整个图表绘制功能.图表功能的第一行创建更新功能.*

**The update function just re-calls the entire chart drawing function using the same container selection. One of the first lines of the chart function creates the update function.*

这是代码，基于 nvd3.org实时代码页上的堆积区域"示例. :

Here's the code, based on the Stacked Area example on the nvd3.org live code page:

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;
});

这篇关于NVD3堆积面积图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！