D3.js中匿名函数调用其他函数异常，柱状图无法正确更新

首先可以明确：你的匿名函数用法是正确的。通过call(this, d)把触发事件的单选按钮上下文传递给两个函数，让它们能通过this.value获取选中值，这个逻辑没问题。问题出在change函数的实现细节上，导致柱子位置没有正确更新。

核心问题点及修复步骤 #

1. 轴更新方式冗余且易出问题 #

你当前每次更新都删除旧轴再重新创建，这不仅低效，还可能导致DOM元素的不必要重建。更合理的方式是直接更新已有轴的刻度：

替换change函数里的这段代码：

svg.select(".y.axis").remove();
svg.select(".x.axis").remove();
svg.append("g").attr("class", "x axis").attr("transform", "translate(0," + height + ")").call(xAxis);
svg.append("g").attr("class", "y axis").call(yAxis).append("text").attr("transform", "rotate(0)").attr("x", 50).attr("dx", ".1em").style("text-anchor", "end").text("Option %");

改为：

// 更新x轴
svg.select(".x.axis").call(xAxis);
// 更新y轴
svg.select(".y.axis").call(yAxis);

补充：把y轴的文本创建移到初始化代码里，避免每次更新都重复添加（初始化时创建一次即可）。

2. 确保数据绑定与更新逻辑正确 #

虽然你的key函数function(d) { return d.label; }是正确的，但可以做以下检查：

• 在change函数里添加console.log(y(d.label), x(d.value))，确认比例尺计算出的位置和宽度是否符合预期；
• 检查更新柱子时的transition是否正确绑定到了已有元素的rect上，确保没有遗漏选择器。

3. 验证数据集是否正确传递 #

在selectDataset函数开头添加console.log(this.value, dataset)，确认选中的单选按钮值对应的数据集是否正确传入change函数。比如选中"option1"时，是否确实传入了datasetOption1。

4. 修正HTML单选按钮的id规范 #

多个元素使用同一个iddataset不符合HTML规范，建议去掉id或者给每个按钮设置唯一id（比如dataset-total、dataset-option1），避免潜在的DOM选择问题。

修复后的change函数示例（简化版） #

function change(dataset) {
  // 更新比例尺域
  y.domain(dataset.map(function(d) { return d.label; }));
  x.domain([0, d3.max(dataset, function(d) { return d.value; })]);

  // 更新轴
  svg.select(".x.axis").call(xAxis);
  svg.select(".y.axis").call(yAxis);

  // 数据绑定
  var bar = svg.selectAll(".bar").data(dataset, function(d) { return d.label; });

  // 移除退出的元素
  bar.exit().remove();

  // 处理新增元素
  var barEnter = bar.enter().append("g").attr("class", "bar");
  barEnter.append("rect")
    .attr("x", x(0))
    .attr("y", function(d) { return y(d.label); })
    .attr("width", function(d) { return x(d.value); })
    .attr("height", y.bandwidth());
  
  barEnter.append("text")
    .attr("x", function(d) { return x(d.value) + 10; })
    .attr("y", function(d) { return y(d.label) + y.bandwidth() / 2; })
    .attr("dy", ".35em")
    .text(function(d) { return d.value; });

  // 更新已有元素
  bar.select("rect")
    .transition().duration(3050)
    .attr("y", function(d) { return y(d.label); })
    .attr("width", function(d) { return x(d.value); });

  bar.select("text")
    .transition().duration(3050)
    .attr("x", function(d) { return x(d.value) + 10; })
    .attr("y", function(d) { return y(d.label) + y.bandwidth() / 2; })
    .text(function(d) { return d.value; });
}

额外优化建议 #

可以把颜色变化的逻辑整合到change函数里，不需要单独的changeColor函数，这样逻辑更集中。比如在更新柱子的transition时同步设置fill样式：

bar.select("rect")
  .transition().duration(3050)
  .attr("y", function(d) { return y(d.label); })
  .attr("width", function(d) { return x(d.value); })
  .style("fill", function() {
    const value = d3.select("input[name='dataset']:checked").node().value;
    return value === "total" ? "blue" : value === "option1" ? "red" : "yellow";
  });

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