D3 SVG 路径未填充线性比例渐变

Posted 2023-02-22

【中文标题】D3 SVG 路径未填充线性比例渐变

【英文标题】：D3 SVG path is not filling with linear scale gradient

【发布时间】：2022-01-19 01:51:09

【问题描述】：

我有一个 SVG，我的目标是某个路径元素，id 为：_116。

通过这样做，我可以轻松地用纯色填充路径：

 d3.select("path#_116").style("fill", 'blue');

但是，假设我有一个线性比例颜色，所以我想对其应用渐变：

let scale = d3.scaleLinear()
    .domain([1,10])
    .range(["white", "blue"]);

d3.select("path#_116").style("fill", scale);

这行不通。出于某种原因，它将填充设置为黑色（#212a39），这似乎来自兄弟元素，如下所示：

对这里发生的事情有什么想法吗？

【参考方案1】：

缩放函数将为提供的值返回单一颜色（对于所有 D3 缩放函数都是如此），这可能解释了您所看到的输出。默认情况下，比例尺不固定，因此比例尺将插入域外的值并返回范围外的值，这解释了为什么您的值似乎不适合您的域。

缩放函数不会修改 DOM，但渐变需要 SVG 中的元素来表示渐变。通常渐变是 defs 标签的子元素：

<svg>
    <defs>
      <linearGradient id="gradient">
        <stop stop-color="white" offset="0%"/>
        <stop stop-color="blue" offset="100%"/>
      </linearGradient>
     </defs>
     <rect width=300 height=100 fill="url(#gradient)"></rect>
</svg>

如果您有一个现有的 SVG 并且想要修改单个路径，我们可以附加定义、渐变、停止，并将其应用于给定路径：

d3.xml("https://upload.wikimedia.org/wikipedia/commons/a/ab/Isobates-simple_example.svg")
   .then(function(image)   

    let svg = d3.select("body")
      .append(()=>image.documentElement);
      
    let gradient = svg.append("defs")
      .append("linearGradient")
      .attr("id","gradient");
      
    gradient.append("stop")
       .attr("stop-color","white")
       .attr("offset","0%")
      
    gradient.append("stop")
        .attr("stop-color","blue")
        .attr("offset","100%");
        
    svg.selectAll("#path3156")
      .style("fill", "url(#gradient)");
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.1.0/d3.min.js"></script>

有一些方法可以更有效地做到这一点，但通常你会在 DOM 中实现相同的结构（使用 .append() 和 .html() 可以节省一些行）。而且 D3 也是完全可选的 - 这只是向 DOM 添加一些元素并设置现有元素的填充。

您的问题似乎与单一梯度有关，但如果我们有许多梯度，如果我们希望梯度是数据驱动的并将缩放合并到混合中，那么答案会变得有点复杂。既然我不认为你在问这个问题，我将把它留到另一个时间。