點擊按鈕觸發D3更新模式

Question

我想使用按鈕來觸發D3的更新循環，但我不知道如何做到這一點。我希望第一個按鈕更新爲「championsleague」數據，第二個按鈕更新爲「premierleague」。

這是我到目前爲止

<button class="opts" value="championsleague">Champions League</button> 
<button class="opts" value="premierleague">Premier League</button> 

// handle on click event 
d3.select('.opts') 
    .on('click', function() { 
    var data = eval(d3.select(this).property('value')); 
    updateLegend(data); 
    }) 

JSFiddle

Answer 1

您正在使用d3.select()只選擇第一個元素嘗試。您需要selectAll指定類opts的按鈕。

檢查這個片段

d3.selectAll('.opts') 
    .on('click', function() { 
    var data = eval(d3.select(this).property('value')); 
    updateLegend(data); 
    }); 

這裏是一個工作fiddle