动态添加按钮 d3.js

Question

这似乎是一个非常微不足道的问题，但我一生都找不到令人满意的答案。如何添加具有绑定功能的按钮而不将其硬编码到页面中或对“onclick”属性进行字符串化？IEsome_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")

  .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 clicked me”没有任何点击。所以，为了让它起作用，我们不应该调用这个函数。有趣的是，console.log接受 3 个参数，看看如果我们不调用会发生什么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>

现在console.log，当您单击按钮时可以使用，因为您将它作为函数引用传递。但是，第一个值是undefined因为您没有将任何字符串传递给console.log.

话虽如此，你想要的是：

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>

现在您正在向click事件传递一个适当的函数，当您单击时将调用该函数。

Answer 2

当您：

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