我想使用線性漸變> https://bl.ocks.org/HarryStevens/6eb89487fc99ad016723b901cbd57fde創建顏色圖例。但是我怎樣才能在這里傳遞我的 d3 顏色，因為它的形式類似于 d3.scaleSequential(d3.interpolateViridis).domain([0,1])。在線性漸變中，顏色傳遞如下：
var data = [{"color":"#000004","value":0},{"color":"#02020c","value":5}]
linearGradient.selectAll("stop")
.data(data)
.enter().append("stop")
.attr("offset", d => ((d.value - extent[0]) / (extent[1] - extent[0]) * 100) "%")
.attr("stop-color", d => d.color);
注意：我的資料集如下：
export const colorScales: Record<string, (num: number) => string> = {
Rainbow: d3.interpolateHslLong("red", "blue"),
Spectral: d3.interpolateSpectral,
RdYlBu: d3.interpolateRdYlBu,
RdYlGn: d3.interpolateRdYlGn,
RdBu: d3.interpolateRdBu,
PiYG: d3.interpolatePiYG,
Warm: d3.interpolateWarm,
Cool: d3.interpolateCool,
Viridis: d3.interpolateViridis,
Inferno: d3.interpolateInferno,
Magma: d3.interpolateMagma,
Plasma: d3.interpolatePlasma,
CubeHelix: d3.interpolateCubehelixDefault,
YlOrRd: d3.interpolateYlOrRd,
Blues: d3.interpolateBlues,
};
uj5u.com熱心網友回復：
這是一個使用d3.interpolateSpectral. 您可以使用d3.range和創建資料map：
// create an array of steps based on the color scale
var data = d3.range(10).map(d=> ({color:d3.interpolateSpectral(d/10), value:d}))
// get the array's min and max value
var extent = d3.extent(data, d => d.value);
linearGradient.selectAll("stop")
.data(data)
.enter().append("stop")
.attr("offset", d => ((d.value - extent[0]) / (extent[1] - extent[0]) * 100) "%")
.attr("stop-color", d => d.color);
從技術上講，您可以使用這些分類方案中的顏色來做到這一點，但這對我來說沒有多大意義。
// d3.schemeCategory10 is just an array of color
// use map to add some values (index in this case)
var data = d3.schemeCategory10.map((d,i) => ({color:d, value:i}))
linearGradient.selectAll("stop")
.data(data)
.enter().append("stop")
.attr("offset", d => d.value/9 * 100) "%") // index/length
.attr("stop-color", d => d.color);
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/422079.html
標籤：
下一篇：D3地圖圖例問題