如何在D3.js中將點擊按鈕動態添加到html表

Question

現在，我具有以下更新表的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");
}

每個表中的按鈕都顯示在屏幕上，但是問題在於， 每次更新表時，都會調用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> <button>使用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 "";
    }
});