以编程方式禁用 nvd3 水平多条形图上的系列

Question

问题是我的图表上有很多系列，在加载时，我只想选择 3 个。

有没有办法 'disable'（隐藏）nvd3 Horizontal Multi-Bar Chart 上的一个系列？（我正在以编程方式寻找点击系列行为）

我尝试用 'visible': false, 发送 JSON 但它不起作用。

var data=[{"key": "Series 1",
           "visible": false, 
           "values": [{"value": 10000.0, "label": ...

以下 @shabeer90 指令测试：

           "disabled": true,

在这种情况下，系列被禁用，但不允许切换以启用点击系列圈。

Answer 1

据我所知，您不能直接使用 NVD3 执行此操作（至少不能不修改源代码）。但是，您可以通过模拟点击图例元素以编程方式触发此操作：

d3.select("g.nv-legendWrap").selectAll("g.nv-series")
        .each(function(d) {
            this.dispatchEvent(new Event("click"));
        });

假设您的数据有一个属性 visible 决定是否显示该系列，您可以根据该属性进行过滤：

d3.select("g.nv-legendWrap").selectAll("g.nv-series")
        .filter(function(d) { return d.visible == false; })
        .each(function(d) {
            this.dispatchEvent(new Event("click"));
        });

如果您使用过渡来创建图形，请记住在过渡完成后调用此代码。完成演示 here.

以编程方式禁用 nvd3 水平多条形图上的系列

Programatically disable series on nvd3 Horizontal Multi-Bar Chart

jquery

d3.js

nvd3.js