单击按钮触发D3更新模式

Question

I want to use buttons to trigger D3's update loop but am not sure how to do this. I would like the first button to update with data labelled "championsleague" and the second to update with "premierleague".

This is what I've tried so far

<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

You are using d3.select() which only selects the first element. You need to selectAll the buttons with the specified class opts .

Check this snippet

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

Here is a working fiddle