Dynamically add button d3.js

Question

This seems like a really trivial question, but I cannot for the life of me find a satisfying answer.

How do I add a button with a bound function WITHOUT hardcoding it into the page or string-ifying the "onclick" attribute?

i.e.

some_div_selection.append("button").text("+").on("click", console.log("You clicked me"));

instead the only way I've seen people do this is

some_div_selection.append("button").attr("onclick", "foobar()").text("+")

Which seems very clunky and brittle. Do I need to give the button some kind of data or what?

Gerardo Furtado · Accepted Answer · 2019-11-28 03:12:09Z

3

I'm a D3 programmer and I must say that in all those years I never saw a single D3 code using the approach you claim is the only one you have seen, which is setting the onclick attribute:

selection.attr("onclick", "foo()")

It does work, but that's not idiomatic D3. In D3, we use the on method. However, the problem with your first snippet is that it's calling the function immediately:

d3.select("body")
  .append("button")
  .html("Click me")
  .on("click", console.log("you clicked me"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>

You can see that the console displays "you clicked me" without any click. So, for that to work, we should not call the function. Funnily enough, console.log accepts 3 arguments, have a look at what happens if we don't call console.log:

d3.select("body")
  .append("button")
  .html("Click me")
  .on("click", console.log);

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>

Now console.log works when you click the button, because you passed it as the function reference. However, the first value is undefined because you didn't pass any string to console.log.

That being said, what you want is:

d3.select("body")
  .append("button")
  .html("Click me")
  .on("click", () => {
    console.log("you clicked me")
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>

Now you're passing a proper function to the click event, which will be called when you click.

edited Nov 28, 2019 at 3:12

answered Nov 28, 2019 at 0:22

Gerardo Furtado

102k9 gold badges128 silver badges178 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Koala Bear Over a year ago

That makes a lot of sense now. I'm not particularly experienced with web development and couldn't figure out why the function was being immediately executed, this clicked the gears into place.

Ted Fitzpatrick · Accepted Answer · 2019-11-27 21:57:24Z

0

What happens when you:

some_div_selection.append("button").text("+").on("click", function(){console.log("You clicked me")});

answered Nov 27, 2019 at 21:57

Ted Fitzpatrick

9541 gold badge9 silver badges21 bronze badges

Collectives™ on Stack Overflow

Dynamically add button d3.js

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related