如何将点击按钮动态添加到 html table in D3.js

Question

现在我有以下更新 table 的 D3 代码。第一列由数据中的字符串填充，第二列应该是一个按钮，单击该按钮会将字符串打印到控制台。相关的非工作代码如下：

function update_table(old_table, data, which_div) {
    var columns = ["value", "button"];
    table.select("tbody").remove();
    var tbody = table.append("tbody");
    var rows = tbody.selectAll("tr").data(data).enter().append("tr");
    var cells = rows.selectAll("td")
        .data(function (d) {
           return columns.map(function (column) {
              return { column: column, text: d};
        });
    }).enter()
    .append("td")
    .html(function (d) {  
        if (d.column === columns[0]) return d.text;
        else if (d.column === columns[1]) {
            return "<button onclick="+clickaction(d)+">"+"Click me!</button>";
        }
    });
return table ;
}

function clickaction(d) {
    console.log("hi");
}

每个 table 中的按钮显示在屏幕上，但问题是每次 table 更新时，console.log("hi") 得到叫。单击按钮时不会。我该如何解决？

Answer 1

一种更优雅的方法是附加文本 <td>，然后附加按钮 <td>。然后你可以直接在第二列附加按钮。

// Append the first column, using the data already stored in the rows
rows.append("td").html(function(d){ return d; });

// Append the second column, which has no text but contains a button
// with an onclick function
var buttonColumn = rows.append("td");
buttonColumn.append("button")
    .text("Click me!")
    .on("click", function(d){ return clickaction(d); });

但是如果您想使用当前的方法，您可以在 <td> 中使用 D3 附加一个 <button>，这样您就可以使用 button.on("click", function(){ ... }):

.html(function (d) {  
    if (d.column === columns[0]) return d.text;
    else if (d.column === columns[1]) {
        // Append a button as a side-effect
        var button = d3.select(this).append("button")
            .text("Click me!")
            .on("click", function(){ clickaction(d); })
        // Return nothing
        return "";
    }
});

如何将点击按钮动态添加到 html table in D3.js

How to dynamically add click button to an html table in D3.js

html

javascript

d3.js