Javascript 如何使用d3.js添加按钮表列？

带小苏打粉的桌子
.线路{
填充：无；
笔画：钢蓝；
笔划宽度：1.0px；
}
桌子{
边界塌陷：塌陷；
宽度：100%；
}
th，td{
填充：8px；
文本对齐：左对齐；
边框底部：1px实心#ddd；
}
th{
背景色：#F5；
}
/*tr:hover{背景色：#f5}
桌子
变量列=['Fruit'，'Color'，'Lines']
风险值数据=[
[‘橙色’、‘橙色’、[1,2,3,1,6]]，
苹果、红色、[6,2,6,5,5]，
[‘葡萄’、‘紫色’、[9,1,2,3,1]]
]
//创建表
var table=d3.选择（“表格”）.追加（“表格”）；
var thead=table.append（“thead”）.append（“tr”）；
thead.全选（“th”）
.数据（列）
.输入（）
.附加（“th”）
.文本（功能（d）{
返回d；
});
var tbody=table.append（“tbody”）；
var trows=tbody
.selectAll（“tr”）
.数据（数据）
.输入（）
.附加（“tr”）；
var tcells=trows
.selectAll（“td”）
.data（函数（d，i）{返回d；}）
.输入（）
.附加（“td”）
.text（函数（d，i）{返回d；}）；
//更新（添加带有图形的列）
附录（“th”）.文本（“图形”）；
trows.selectAll（“td.graph”）
//使用类以避免重新选择现有元素
.data（函数（d）{return[d[2]]；}）
.输入（）
.附加（“td”）
.attr（“类”、“图”）
.每（行）；
//小插曲
功能线（测试）{
变量宽度=100，高度=20；
var数据=[]
对于（i=0；i

将按钮附加到单元格类：

 var button = $("<button>Button</button>");
 button.click(function() {
    alert("here i have used data in json format : "+JSON.stringify(data));
 });
 button.appendTo(".graph");

var按钮=$（“按钮”）；
按钮。单击（函数（）{
警报（“这里我使用了json格式的数据：“+json.stringify（数据））；
});
按钮。追加到（“.graph”）；

---

下面是一个工作示例

将按钮附加到单元格类：

 var button = $("<button>Button</button>");
 button.click(function() {
    alert("here i have used data in json format : "+JSON.stringify(data));
 });
 button.appendTo(".graph");

var按钮=$（“按钮”）；
按钮。单击（函数（）{
警报（“这里我使用了json格式的数据：“+json.stringify（数据））；
});
按钮。追加到（“.graph”）；

下面是一个工作示例

首先制作一个标题

thead.append("th").text('Action');

然后在行中添加选择器并传递数据，创建一个

td

，然后在该

td

上创建一个

按钮，最后注册一个侦听器以供单击

trows.selectAll("td.button")  
//use a class so you don't re-select the existing <td> elements
          .data(function(d) {return [d];})
          .enter()
            .append("td")
            .attr("class", "button")
            .append("button")
            .text(function(d){return "Do Something"})
            .on("click", function(d){ console.log(d); alert("hello")});//attach listener

trows.selectAll（“td.按钮”）
//使用类以避免重新选择现有元素
.data（函数（d）{return[d]；}）
.输入（）
.附加（“td”）
.attr（“类”、“按钮”）
.append（“按钮”）
.text（函数（d）{return“Do Something”}）
.on（“click”，函数（d）{console.log（d）；alert（“hello”）}）//附加侦听器

工作代码首先制作一个标题

thead.append("th").text('Action');

然后在行中添加选择器并传递数据，创建一个
td
，然后在该
td
上创建一个
按钮，最后注册一个侦听器以供单击

trows.selectAll("td.button")  
//use a class so you don't re-select the existing <td> elements
          .data(function(d) {return [d];})
          .enter()
            .append("td")
            .attr("class", "button")
            .append("button")
            .text(function(d){return "Do Something"})
            .on("click", function(d){ console.log(d); alert("hello")});//attach listener

trows.selectAll（“td.按钮”）
//使用类以避免重新选择现有元素
.data（函数（d）{return[d]；}）
.输入（）
.附加（“td”）
.attr（“类”、“按钮”）
.append（“按钮”）
.text（函数（d）{return“Do Something”}）
.on（“click”，函数（d）{console.log（d）；alert（“hello”）}）//附加侦听器

工作代码
我必须设置为一列我必须创建一列，该列包含此按钮。如果我单击第一行按钮，则表示该行显示警报消息data@SaiRajesh我认为Cyril回答得很好。我必须做一个列，我必须创建一个列，该列包含此按钮，然后单击第一行按钮的意思是，它显示警告消息，作为该行data@SaiRajesh我想Cyril回答得很好。当我单击行按钮时如何访问特定行？我的意思是，如果单击第一行按钮，我必须提醒行数据检查控制台
console.log（d）此处d是该行的数据，或者我已在警报检查中添加了该行的数据。当我单击该行按钮时，如何访问特定行？我的意思是，如果单击第一行按钮，我必须警告该行数据检查控制台
控制台.log（d）此处d是该行的数据，或者我已将该行的数据添加到plunk的警报检查中