动态添加按钮 d3.js

Question

这似乎是一个非常微不足道的问题，但我一生都找不到令人满意的答案。

如何添加具有绑定功能的按钮而不将其硬编码到页面中或对“onclick”属性进行字符串化？

IE

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

相反，我看到人们这样做的唯一方法是

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

这看起来非常笨重和脆弱。我需要给按钮一些数据还是什么？

Answer 1

我是一名 D3 程序员，我必须说，在这些年里，我从未见过一个使用您声称是您唯一见过的方法的 D3 代码，即设置onclick属性：selection.attr("onclick", "foo()")它确实有效，但这不是惯用的 D3。在 D3 中，我们使用该on方法。但是，您的第一个片段的问题在于它立即调用该函数：d3.select("body")&nbsp; .append("button")&nbsp; .html("Click me")&nbsp; .on("click", console.log("you clicked me"));<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>可以看到控制台显示“you clicked me”没有任何点击。所以，为了让它起作用，我们不应该调用这个函数。有趣的是，console.log接受 3 个参数，看看如果我们不调用会发生什么console.log：d3.select("body")&nbsp; .append("button")&nbsp; .html("Click me")&nbsp; .on("click", console.log);<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>现在console.log，当您单击按钮时可以使用，因为您将它作为函数引用传递。但是，第一个值是undefined因为您没有将任何字符串传递给console.log.话虽如此，你想要的是：d3.select("body")&nbsp; .append("button")&nbsp; .html("Click me")&nbsp; .on("click", () => {&nbsp; &nbsp; console.log("you clicked me")&nbsp; });<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>现在您正在向click事件传递一个适当的函数，当您单击时将调用该函数。

Answer 2

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