javascript - 动态添加按钮d3.js

Question

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

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

即

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")
  .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 事件，该事件将在您单击时调用。