有两个问题与此结果相关

1）渐变定义缺少.enter（）方法

这对于为每个数据点创建linearGradient元素是必需的。

var gradient = svg.append("defs")
  .data(data)
  .append("linearGradient")
    .attr("id", "gradient")
    .attr("x1", "0%")
    .attr("y1", "0%")
    .attr("x2", "100%")
    .attr("y2", "00%")
    .attr("spreadMethod", "pad");

您可以用途：

var gradient = svg.append("defs")
  .selectAll("linearGradient") // Creates the initial selection of linear gradients
  .data(data)
  .enter() // Binds new linearGradient elements for each data point
  .append("linearGradient")
    .attr("id", "gradient")
    .attr("x1", "0%")
    .attr("y1", "0%")
    .attr("x2", "100%")
    .attr("y2", "00%")
    .attr("spreadMethod", "pad");

现在，您的每种颜色都有一个linearGradient元素，而不是只有一个。但是，您会注意到问题仍然存在，这导致了第二个问题：

2）如果所有线性渐变都具有相同的ID，则代码无法区分颜色。

不同的linearGradient元素需要不同的ID才能引用它们所表示的数据。继续上一个示例，而不是：

var gradient = svg.append("defs")
  .selectAll("linearGradient") // Creates the initial selection of linear gradients
  .data(data)
  .enter() // Binds new linearGradient elements for each data point
  .append("linearGradient")
    .attr("id", "gradient")
    .attr("x1", "0%")
    .attr("y1", "0%")
    .attr("x2", "100%")
    .attr("y2", "00%")
    .attr("spreadMethod", "pad");

您可以用途：

var gradient = svg.append("defs")
  .selectAll("linearGradient") // Creates the initial selection of linear gradients
  .data(data)
  .enter() // Binds new linearGradient elements for each data point
  .append("linearGradient")
    .attr("id", d => `gradient${d.name}`) // Create a unique data-driven id for each linearGradient
    .attr("x1", "0%")
    .attr("y1", "0%")
    .attr("x2", "100%")
    .attr("y2", "00%")
    .attr("spreadMethod", "pad");

在条形图中，代码现在可以根据数据引用正确的linearGradient：

bars.append("rect")
...
.style("fill", d => `url(#gradient${d.name})`); // picks the gradient that match the data