【问题标题】:Programatically disable series on nvd3 Horizontal Multi-Bar Chart以编程方式禁用 nvd3 水平多条形图上的系列
【发布时间】:2015-05-10 09:15:35
【问题描述】:

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

有没有办法“禁用”(隐藏)nvd3 Horizontal Multi-Bar Chart 上的系列? (我正在寻找点击系列行为,但以编程方式)

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

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

按照@shabeer90 指令测试:

           "disabled": true,

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

【问题讨论】:

    标签: jquery d3.js nvd3.js


    【解决方案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

    【讨论】:

    • 不错的答案!你知道是否有办法在没有过渡的情况下完成它? (jsfiddle.net/au33ev7a)
    • 这有点棘手(同样不直接支持)。您可以使用最新版本的 NVD3,它允许设置过渡持续时间,在单击之前将其设置为 0,然后重置为默认值。那么你也应该立即致电unselectjsfiddle.net/au33ev7a/1
    • 谢谢@LarsKotthoff,对我来说足够了。感谢您分享您的知识。
    猜你喜欢
    • 2017-03-29
    • 1970-01-01
    • 1970-01-01
    • 2012-03-28
    • 1970-01-01
    • 1970-01-01
    • 2017-04-04
    • 1970-01-01
    • 2017-01-12
    相关资源
    最近更新 更多