nvd3 multiBarChart - 图例点击事件

时间:2017-12-18 16:08:42

标签: javascript d3.js nvd3.js

我有一个带有图例的堆叠multiBarChart。

当您通过图例停用所有项目时,它们都会再次启用。我想阻止这种情况发生,并且只有在用户点击某个项目时才启用它们。

我一直在查看图表来源(下面的链接),但找不到所有项目再次启用的位置。我在想,也许我可以覆盖legendClick调度函数,但似乎这没有在我自己的JS中注册(下面的小提琴)

controls.dispatch.on('legendClick', function(d,i) {
    //Some logic to keep all items disabled here
}

https://jsfiddle.net/s2vemzht/26/

https://github.com/novus/nvd3/blob/master/src/models/multiBarChart.js

如何控制图例点击启用/禁用的内容?

更新时间:03/01/2017

我在代码nv.d3.js文件中发现了一个区域,它将所有系列设置回启用状态。如何为图表的特定实例覆盖此行为,而不是更改源中的默认行为?

//the default behavior of NVD3 legends is, if every single series
// is disabled, turn all series' back on.
data.forEach(function(series) { series.disabled = false});

https://github.com/novus/nvd3/blob/f81cd38015ecb4c3a11a161e37a62761276b87ac/build/nv.d3.js#L6433

1 个答案:

答案 0 :(得分:2)

legendClick事件的正确处理程序必须以这种方式编写:

chart.legend.dispatch.on('legendClick', function(d,i) {
    var dt = d3.select('#chart svg').datum();   // <-- all data
    console.log("legendClick", sel_data, idx_data, dt);

    // here you can do what you need
});

小提琴更新:https://jsfiddle.net/beaver71/2dxthaL2/