javascript - nvd3 multiBarChart - 图例单击事件

标签 javascript d3.js nvd3.js

我有一个带有图例的堆叠多条形图。

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

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

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

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

更新:2017 年 3 月 1 日

我在代码 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

最佳答案

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

fiddle 更新:https://jsfiddle.net/beaver71/2dxthaL2/

关于javascript - nvd3 multiBarChart - 图例单击事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47872232/

相关文章:

javascript - jQuery 获取 id 以 "Source"结尾的文本类型的所有输入元素

javascript - 错误 : Invalid value for <g> attribute transform ="translate(undefined,undefined)"

javascript - 饼图不适用于使用 AngularJS 和 nvd3 的 Json 数据

javascript - 使用 nvd3-ng2 丢失网格线

javascript - 具有单个 JavaScript 事件处理程序的两个 DOM 元素

javascript - Wicket 口 6 : calling javascript function after page load

javascript - 如何使用嵌套promise调用函数并获取值

javascript - 如何使用 jQuery 对多个 HTML tbody 进行分页

csv - 使用d3.csv导入时的csv文件大小限制

javascript - X 轴标签错位