条形图上的 D3 渐变填充 - 带色标

Question

我已经成功地将渐变应用于我的条形图，渐变效果提供了所需的结果。

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");

gradient.append("stop")
    .attr("offset", "0%")
    .attr("stop-color", function(d) {
    return colors(d.name);
  })
    .attr("stop-opacity", 1);

gradient.append("stop")
    .attr("offset", "100%")
    .attr("stop-color", function(d) {
    return colors(d.name);
  })
    .attr("stop-opacity", 0.3);

我还有一个色标，用于为每个类别（名称）分配颜色

var colors = d3.scale.ordinal()
  .range(["#C1D42F", "#2b328c", "#5AB88D", "#8F1F61", "#00A5D3", "#EC5D20", "#F59C28"])

在我开始使用渐变之前，它运行良好

但是，现在我使用的函数似乎只从我的范围中获取第一种颜色 (#C1D42F)。

如何应用渐变以及分配范围颜色？

这是我的fiddle

Answer 1

这个结果有两个问题

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

条形图上的 D3 渐变填充 - 带色标

D3 Gradient Fill on Bar Chart - with colour scale

d3.js

1) 渐变定义缺少 .enter() 方法

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