Trigger D3 update pattern при нажатии кнопки

Question

Я хочу использовать кнопки для запуска цикла обновления D3, но не знаю, как это сделать. Я бы хотел, чтобы первая кнопка обновлялась данными с надписью «чемпионская лига», а вторая для обновления с «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