NVD3 切换流

Question

有谁知道如何在绘制后禁用流？

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

我一直在编写代码来模拟确定状态后的点击事件，但这似乎有点笨拙和缓慢。

编辑： 根据要求，这是一个 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;
});

Answer 1

找到我的答案..

以下作品

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.

NVD3 切换流

NVD3 Toggle Streams

javascript

d3.js

nvd3.js