Question

我是N00b并且在使用NVD3时遇到了问题，而且这里有一些聪明人，所以我希望你能提供帮助。

我正在尝试创建一个选择要显示的数据的下拉框。我可以调用一个函数，但我无法让图表更改其数据位置。

HTML：

<select name="slct" id="name" onchange="data(this.value)">
<option>Select power data</option>
<option value="Residence_supply_data">Average kwh residences supplied to the grid</option>
<option value="Residence_need_data">Average kwh supplied to residences</option>
</select>

注意：我已经使用上面的值作为名称创建了JSON库。

使用Javascript：

function data(value) {
    console.log(value);
    var dat_select = value;
    return dat_select;
};

var chart;
nv.addGraph(function() {
    chart = nv.models.multiBarHorizontalChart().x(function(d) {
        return d.label
    }).y(function(d) {
        return d.value
    }).margin({
        top : 30,
        right : 105,
        bottom : 30,
        left : 100
    })
    //.showValues(true)
    .tooltips(true).barColor(d3.scale.category20().range()).showControls(false);

    chart.yAxis.tickFormat(d3.format(',.0f'));

    d3.select('#chart1 svg').datum(dat_select).transition().duration(1000).call(chart);

    nv.utils.windowResize(chart.update);

    chart.dispatch.on('stateChange', function(e) {
        nv.log('New State:', JSON.stringify(e));
    });

    return chart;
});

一切正常，函数会记录结果，只是无法选择我需要的数据。如果我设置d3.select('#chart1 svg').datum(Residence_supply_data)，则会加载该数据。

感谢你。

Answer 1

d3.slect('#chart1 svg')将其分配给变量（全局变量）

myChart = d3.select('#chart1 svg').datum(dat_select).transition()
            .duration(1000).call(chart);

所以现在myChart包含nvd3 multiBarHorizontalChart()图表。

因此，当您希望通过从您选择的地点调用function updateMyChart()来更新图表时，您可以像这样更新它：

function updateMyChart() {
    // myChart is passed to your new data
    // myChart also calls chart which hold the attributes you 
    // had set earlier for multiBarHorizontalChart
    myChart.datum(Residence_supply_data).transition().duration(1000).call(chart);

    // Update the chart during the window screen resizing
    nv.utils.windowResize(myChart.update);
}

希望这会对你有所帮助。

选择NVD3图表的数据

1 个答案: