Question

我一直在努力解决一个可能非常简单的问题。更广泛的上下文是一个力导向图，我想在其中动态生成一系列过滤按钮，其类别来自外部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传递给函数时生成按钮的任何想法？

谢谢！

Answer 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);
 });

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

Answer 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;
}

<script src="https://d3js.org/d3.v4.min.js"></script>

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

2 个答案: