D3.js点击表格单元格时获取对应行最后一个单元格的值

我来帮你搞定这个问题～你的代码里主要有两个小问题：一是选择表格的语法错误，二是没必要绕到原生DOM去取内容，利用D3绑定的数据会更靠谱。

问题分析 #

1. 选择器错误：你写的d3.select('id','myTable')是不对的，D3的ID选择器应该用#前缀，也就是d3.select('#myTable')，但其实我们根本不需要这么麻烦去操作原生DOM的rows和cells。
2. 数据利用不足：你已经给每一行绑定了完整的CSV数据，点击单元格时，直接通过父行拿到绑定的原始数据，就能轻松获取最后一个字段的值，比去读DOM的innerHTML更准确。

修正后的代码 #

我把你的点击事件部分修改了，同时保留了原有的高亮逻辑，你可以直接用：

var container = d3.select("body")
 .append("table")
 .attr("id","myTable");
//header
var headers=container.append("thead").append("tr")
 .selectAll("th")
 .data(titles)
 .enter().append("th")
 .text(function(d) { return d; });
var rows=container.append("tbody")
 .selectAll("tr").data(dataCSV)
 .enter().append("tr")
 .on('click',function(d){
 if(d3.select(this).classed("highlight")){
 d3.selectAll("tr").classed("highlight", false);
 }else{
 d3.selectAll("tr").classed("highlight", false);
 d3.select(this).classed("highlight", true);
 }
 });
rows.selectAll("td")
 .data(function (d) {
 return titles.map(function (k) {
 return { 'value': d[k], 'name': k};
 });
 }).enter()
 .append('td')
 .attr("style","width:"+widthCellule+"%")
 .attr('data-th', function (d) { return d.name; })
 .text(function (d) { return d.value; })
 // 修正后的点击事件
 .on('click', function(e, d) {
    // 找到当前单元格所在的行
    const currentRow = d3.select(this).closest('tr');
    // 获取该行绑定的原始CSV数据
    const rowData = currentRow.datum();
    // 获取最后一列的字段名
    const lastColumn = titles[titles.length - 1];
    // 拿到最后一个单元格的值
    const lastCellValue = rowData[lastColumn];
    alert(lastCellValue);
 });

为什么这样更优？ #

• 数据驱动：直接使用D3绑定的原始数据，避免了DOM内容和数据不一致的风险（比如如果后续有数据更新，DOM可能没同步，但绑定的数据是准确的）。
• 代码更简洁：不需要去计算行号、列号，也不用操作原生DOM的rows/cells属性，用D3的API就能完成。

内容的提问来源于stack exchange，提问作者mono