D3 SVG 路徑未填充線性刻度漸變

Question

我有一個 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），這似乎來自兄弟元素，如下所示：

關於這里發生了什么的任何想法？

Answer 1

縮放 function 將為提供的值返回單一顏色（對於所有 D3 縮放函數都是如此），這可能解釋了您所看到的 output。 默認情況下，比例尺不固定，因此比例尺將插入域外的值並返回范圍外的值，這解釋了為什么您的值似乎不適合您的域。

縮放函數不會修改 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 並想修改單個路徑，我們可以 append 定義、漸變、停止，並將其應用於給定路徑：

 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 添加一些元素並設置現有元素的填充。

您的問題似乎與奇異梯度有關，但如果我們有許多梯度，如果我們希望梯度是數據驅動的並將縮放合並到混合中，那么答案會變得有點復雜。 既然我不認為你在問這個，我會再問一次。