score:1

Accepted answer

That's because you don't bind the functions as event handlers, you call the functions and use their return values as event handlers.

You can use function expressions to create function references that you can bind as event handlers. Inside the function expressions you use the function calls that you have now:

d3.select("#distancefig").on("click", function(){
  d3.event.preventDefault();
  updatePlot('distancefig', false));
});
d3.select("#speedfig").on("click", function(){
  d3.event.preventDefault();
  updatePlot('speedfig', false));
}),

score:2

Without any knowledge of D3, I'm guessing it's because you're doing this

d3.select("#distancefig").on("click", updatePlot('distancefig', false));

Rather then this

d3.select("#distancefig").on("click", function() {
  updatePlot('distancefig', false)
});

You are doing a function call when you intend to supply a function to be called.


Related Query

More Query from same tag