NVD3切换流

时间:2017-06-15 21:31:33

标签: javascript d3.js nvd3.js

有没有人知道如何在绘制后禁用流?

我希望在页面加载后修改活动流,并且用户点击了页面不同部分的按钮。

我一直在研究代码来确定点击事件后确定它的状态,但这似乎有点笨拙和缓慢。

修改 根据要求,这里有一个example的NVD3图表,其中包含多个流(图例中的数据系列)。

在图表渲染之后,我正在寻找一个可以在一次调用中启用/禁用多个流(示例中的数据0,数据1等)的函数。

我正在处理将点击事件发送到标签的内容,但认为必须有更好的方法。

<div id="chart">
    <svg></svg>
</div>
var data = function() {
  return stream_layers(4,10+Math.random()*10,.1).map(function(data, i) {
    return {
      key: 'Data ' + i,
      values: data
    };
  });
}

function stream_layers(n, m, o) {
    if (arguments.length < 3) o = 0;

    function bump(a) {
        var x = 1 / (.1 + Math.random()),
            y = 2 * Math.random() - .5,
            z = 10 / (.1 + Math.random());
        for (var i = 0; i < m; i++) {
            var w = (i / m - y) * z;
            a[i] += x * Math.exp(-w * w);
        }
    }
    return d3.range(n).map(function () {
        var a = [],
            i;
        for (i = 0; i < m; i++) a[i] = o + o * Math.random();
        for (i = 0; i < 5; i++) bump(a);
        return a.map(stream_index);
    });
}

function stream_index(d, i) {
    return {
        x: i,
        y: Math.max(0, d)
    };
}

nv.addGraph(function () {
    var chart = nv.models.multiBarChart();

    chart.multibar.stacked(false);
    chart.showControls(false);
    chart.showLegend(true);
    chart.reduceXTicks(false);

    d3.select('#chart svg')
        .datum(data())
        .transition().duration(500).call(chart);

    nv.utils.windowResize(chart.update);

    return chart;
});

1 个答案:

答案 0 :(得分:0)

找到我的答案..

以下作品

chartData[i].disabled = true; // chartData = original data object fed to NVD3 chart
chartData[i].userDisabled = true;
chart.update(); // chart = a reference to your NVD3 chart instance.