選擇NVD3圖表的數據

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); 
} 

希望這有助於你。