在动态创建的按钮中添加参数答案

【问题标题】：Adding arguments in dynamically created buttons在动态创建的按钮中添加参数
【发布时间】：2017-12-13 15:40:14
【问题描述】：

我一直在努力解决一个可能非常简单的问题。更广泛的上下文是一个力导向图，我想在其中动态生成一系列过滤按钮，其类别来自外部 API 的 JSON 文件。我想在按钮的调用中将每个类别分配为参数，但是我无法通过 JS 做到这一点。与该部分相关的代码是：

//Create TA nodes buttons dynamically
for(var ta_name in ta_nodes) {
  d3.select("#controls").append("button").on("click", filterNetwork(ta_nodes[ta_name].ta_name)).html(ta_nodes[ta_name].ta_name);
}

function filterNetwork(thematic_area_filtered) {
    simulation.stop();
    [...]
}

关于在将 ta_nodes[ta_name].ta_name 传递给函数时如何生成按钮的任何想法？

谢谢！

【问题讨论】：

标签： javascript button d3.js parameter-passing

【解决方案1】：

我做了一个变通方法来解决这个问题：

    // Adding TA buttons from nodes via a text 
var ta_discursive_nodes_buttons = d3.select("#controls")
    .append("div")
    .attr("class", "ta_discursive_nodes_buttons")
    .selectAll("div")
    .data(ta_discursive_nodes)
    .enter()
    .append("div")
    .text(function(d){
        return d.ta_name;
      });
// Adding event handler
 ta_discursive_nodes_buttons.on("click", function(d) {
     //alert(d.ta_name);
    filterRelationshipsByThematicArea(d.ta_name);
 });

可能不是最优雅的解决方案，但它确实有效！我希望它对其他人有用:-)

【讨论】：

【解决方案2】：

您的代码（在您的问题中，而不是在您的答案中）存在一些问题：

不要将函数的值作为侦听器传递。当你这样做时：
```
.on("click", foo())
```
您正在传递foo 的返回值，而不是在点击时调用foo，这将是：
```
.on("click", foo)
```
或者，如果foo 有参数：
```
.on("click", function(){
    foo(bar)
}) 
```
你不能像以前那样链接你的函数和html()。
这是最重要的问题：不要在 D3 代码中使用循环来追加元素。正如你所看到的，事情会破裂。除此之外，creating functions inside loops is complicated。

话虽如此，使用“输入”选择，设置侦听器。这是一个基本示例：

var data = ["foo", "bar", "baz"];

var body = d3.select("body");

var buttons = body.selectAll(null)
  .data(data)
  .enter()
  .append("button")
  .text(function(d, i) {
    return "Button " + (i + 1)
  })
  .on("click", function(d) {
    displayValue(d)
  });

function displayValue(value) {
  alert("This button has the datum '" + value + "'")
}

button {
  margin: 2px;
  padding: 6px;
}

&lt;script src="https://d3js.org/d3.v4.min.js"&gt;&lt;/script&gt;

【讨论】：