D3.js：如何将变量传入堆叠柱状图的x比例尺函数？

我明白你想把这个堆叠柱状图改成可复用组件的需求，尤其是要动态传入x轴对应的字段名对吧？其实解决这个问题很简单，核心是在D3的比例尺里用方括号属性访问法代替点表示法——因为当属性名是变量的时候，点表示法就会失效，而方括号可以完美适配动态属性名的场景。

具体改造步骤 #

1. 封装可复用组件的函数结构

首先把整个图表逻辑封装成一个函数，明确传入的参数，比如容器选择器、数据源、x轴对应的字段名、堆叠的y轴字段列表，还有可选的边距配置：

function createStackedBarChart(container, data, xAxisValue, stackKeys, margin = {top: 20, right: 20, bottom: 30, left: 40}) {
  // 设置画布尺寸
  const width = 600 - margin.left - margin.right;
  const height = 400 - margin.top - margin.bottom;

  // 清除容器内已有内容（避免重复渲染）
  d3.select(container).selectAll("*").remove();

  // 创建SVG画布
  const svg = d3.select(container)
    .append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform", `translate(${margin.left}, ${margin.top})`);

  // 后续核心逻辑写在这里
}

2. 修改x比例尺的定义域（关键！）

原来的x比例尺硬编码了d.date，现在把它改成用传入的xAxisValue变量，通过方括号访问对象属性：

// 堆叠数据处理（D3 v7+写法）
const stack = d3.stack().keys(stackKeys);
const series = stack(data);

// 动态获取x轴字段值的x比例尺
const x = d3.scaleBand()
  .domain(data.map(d => d[xAxisValue])) // 用d[xAxisValue]代替硬编码的d.date
  .range([0, width])
  .padding(0.1);

// y比例尺保持原有逻辑（如需动态配置也可同理改造）
const y = d3.scaleLinear()
  .domain([0, d3.max(series, d => d3.max(d, d => d[1]))])
  .range([height, 0]);

3. 保持Bar元素的x属性与比例尺一致

你提到在设置bar的x属性时已经能用方括号，这里只需要确保和比例尺逻辑统一即可：

svg.append("g")
  .selectAll("g")
  .data(series)
  .join("g")
  .attr("fill", (d, i) => d3.schemeCategory10[i])
  .selectAll("rect")
  .data(d => d)
  .join("rect")
  .attr("x", d => x(d.data[xAxisValue])) // 用d.data[xAxisValue]获取原始数据的x轴字段值
  .attr("y", d => y(d[1]))
  .attr("height", d => y(d[0]) - y(d[1]))
  .attr("width", x.bandwidth());

4. 灵活调用复用组件

现在你可以根据不同数据集传入不同的x轴字段名了：

// 示例1：用"date"作为x轴字段
const dataset1 = [
  { date: "Jan", apples: 30, bananas: 20 },
  { date: "Feb", apples: 45, bananas: 35 },
  { date: "Mar", apples: 25, bananas: 40 }
];
createStackedBarChart("#chart1", dataset1, "date", ["apples", "bananas"]);

// 示例2：用"month"作为x轴字段
const dataset2 = [
  { month: "一月", 苹果: 25, 香蕉: 15 },
  { month: "二月", 苹果: 40, 香蕉: 30 },
  { month: "三月", 苹果: 35, 香蕉: 45 }
];
createStackedBarChart("#chart2", dataset2, "month", ["苹果", "香蕉"]);

为什么点表示法不行？ #

简单来说，d.date是直接访问对象的date属性，而当你用变量xAxisValue时，点表示法会把xAxisValue当成属性名（而非变量的值），所以必须用方括号d[xAxisValue]来告诉JS：“我要访问这个变量对应名字的属性”。

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