【问题标题】:NVD3 Toggle StreamsNVD3 切换流
【发布时间】:2017-06-15 21:31:33
【问题描述】:

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

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

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

编辑: 根据要求,这是具有多个流的 NVD3 图表的example(图例中的数据系列)。

图表渲染后,我正在寻找一个可以在单个调用中启用/禁用多个流(示例中的数据 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;
});

【问题讨论】:

  • 你能举例说明你的意思吗?还包括一个 JSFiddle/Plunkr 与您当前的代码。
  • @jeznag 完成。谢谢。

标签: javascript d3.js nvd3.js


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

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2014-11-15
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-11-23
    相关资源
    最近更新 更多