D3.js中.html()创建的按钮onclick传递data参数失败如何解决？

错误原因分析 #

1. 第一个错误Uncaught ReferenceError: d is not defined：
   你在.html()里写的onclick='fillTable(d)'，这里的d是在全局作用域查找的，但D3回调函数中的d是局部变量，全局不存在这个变量，所以找不到。

2. 你修改后的代码出现Uncaught SyntaxError：
   是因为字符串拼接时引号冲突了——onclick='process.fillComponentTable('" + d + "')'里，外层用单引号包裹onclick内容，里面又用单引号包裹d，导致语法断裂，浏览器无法解析。

解决方案 #

方案1：用D3的.on()绑定事件（推荐）

这是D3的标准做法，能直接访问到回调中的d，避免全局作用域问题：

d3.select("#test")
  .selectAll("div")
  .data(myData)
  .enter().append("div")
  .attr("class", "process")
  // 直接append按钮，而非用html()生成
  .append("button")
  .attr("title", "Process settings")
  .attr("class", "btn")
  // 绑定点击事件，直接传入d
  .on("click", function(event, d) {
    // 注意：D3 v6+版本中事件参数event在前，d在后；v5及之前是d在前，event在后
    fillTable(d);
  });

function fillTable(data) {
  console.log(data);
}

方案2：如果必须用.html()生成按钮

需要把d序列化为JSON字符串，转义引号后嵌入onclick，再在函数中解析：

d3.select("#test")
  .selectAll("div")
  .data(myData)
  .enter().append("div")
  .attr("class", "process")
  .html(function(d, i) {
    if (typeof d === 'object') {
      // 把对象d转为JSON字符串，同时转义双引号避免冲突
      const dJson = JSON.stringify(d).replace(/"/g, '"');
      return `<button title='Process settings' onclick='fillTable(JSON.parse(&quot;${dJson}&quot;))' class='btn'></button>`;
    }
    return ''; // 非对象类型返回空内容
  });

function fillTable(data) {
  console.log(data);
}

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