如果数据在0和1之间，如何使用对数采样来使用D3创建图例

Question

我正在使用D3创建一个连续图例(使用线性梯度创建(用于线性采样。现在我必须使用相同的图例进行对数采样。但我的数据介于0和1之间，如下所示。我看到对数采样的域值不能为零(给出无限(，对于零范围内的值，假设(0.1、0.2等(给出负值。如何使用我的数据使用对数采样创建连续图例。

My Data:
[
[0.0, 255, 0, 0],
[0.2, 255, 255, 0],
[0.4, 0, 255, 0],
[0.6, 0, 255, 255],
[0.8, 0, 0, 255],
[1.0, 255, 0, 255]
] 

其中0.0、0.2、0.4等为域值，其余为点的rgb值。

const colorScale = scaleLog().domain([min,max]); // in my case min and max are [0, 1]
const id = "linear-gradient-" + id + "0";
linearGradient = defs
.append("linearGradient")
.attr("id", id)
.attr("x1", "0%")
.attr("x2", horizontal ? "100%" : "0%")
.attr("y1", "0%")
.attr("y2", horizontal ? "0%" : "100%");
// append the color
linearGradient
.selectAll("stop")
.data(itemColor)
.enter()
.append("stop")
.attr("offset", function (data) {
return data.offset + "%";
})
.attr("stop-color", function (data) {
return data.color;
});
// draw the rectangle and fill with gradient
svgLegend
.append("rect")
.attr("x", 35)
.attr("y", horizontal ? 70 : 18)
.attr("width", horizontal ? "189" : 20)
.attr("height", horizontal ? 20 : "149")
.style("fill", "url(#" + currentIndex + ")");
// create tick
const horizontalAxisLeg = axisBottom(scaleLog().domain([min, max]).tickValues(colorScale.domain());

我的传说是这样的：https://jsfiddle.net/z7gn8p5t/

Answer 1

除了使用d3.scaleSymlog而不是d3.scaleLog(请查看此处(之外，使用对数刻度没有问题。

这是你的代码，上面有对数刻度，下面我放了一个线性刻度进行比较：

const itemColor = [{
offset: 0.0,
color: "#ff0000"
},
{
offset: 0.2,
color: "#ffff00"
},
{
offset: 0.4,
color: "#00ff00"
},
{
offset: 0.6,
color: "#00ffff"
},
{
offset: 0.8,
color: "#0000ff"
},
{
offset: 1.0,
color: "#ff00ff"
}
];
const svg = d3.select("svg");
const colorScale = d3.scaleSymlog().domain([0, 1]).range([0, 400]); // in my case min and max are [0, 1]
const colorScale2 = d3.scaleLinear().domain([0, 1]).range([0, 400]); // in my case min and max are [0, 1]
const id = "linear-gradient-0";
const linearGradient = svg.append("defs")
.append("linearGradient")
.attr("id", id)
.attr("x1", "0%")
.attr("x2", "100%")
.attr("y1", "0%")
.attr("y2", "0%");
// append the color
linearGradient
.selectAll("stop")
.data(itemColor)
.enter()
.append("stop")
.attr("offset", function(data) {
return colorScale(data.offset) / 4 + "%";
})
.attr("stop-color", function(data) {
return data.color;
});
const linearGradient2 = svg.append("defs")
.append("linearGradient")
.attr("id", "linear-gradient-1")
.attr("x1", "0%")
.attr("x2", "100%")
.attr("y1", "0%")
.attr("y2", "0%");
// append the color
linearGradient2
.selectAll("stop")
.data(itemColor)
.enter()
.append("stop")
.attr("offset", function(data) {
return colorScale2(data.offset) / 4 + "%";
})
.attr("stop-color", function(data) {
return data.color;
});
// draw the rectangle and fill with gradient
svg.append("rect")
.attr("x", 10)
.attr("y", 18)
.attr("width", 400)
.attr("height", 20)
.style("fill", "url(#linear-gradient-0)");
// create tick
svg.append("g").attr("transform", "translate(10,45)").call(d3.axisBottom(colorScale));
// draw the rectangle and fill with gradient
svg.append("rect")
.attr("x", 10)
.attr("y", 88)
.attr("width", 400)
.attr("height", 20)
.style("fill", "url(#linear-gradient-1)");
// create tick
svg.append("g").attr("transform", "translate(10,115)").call(d3.axisBottom(colorScale2));

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.4.0/d3.min.js"></script>
<svg width="500"></svg>