javascript - 如何反转 d3 色带 d3-scale-chromatic d3.interpolateViridis

Question

我正在尝试反转这个朝阳可视化的色带。它使用带有标签等的 sunburst 可缩放图表。通常情况下，您只需反转它们正在使用的范围内的值，但我不太明白它是如何在设置中获取这些值的。

这是我使用的配色方案 https://github.com/d3/d3-scale-chromatic

d3.interpolateViridis

目前它正在从深紫色变为亮黄色，我需要反转颜色以从亮黄色变为深紫色。所以我需要改变范围值的起点。但是我不明白他在下面是怎么做到的。

建议的方法是更改​​范围并首先从范围的最高值开始。但这似乎不起作用。

require()('@observablehq/flare').then(data => {
const root = partition(data);
const color = 
d3.scaleOrdinal().range(d3.quantize(d3.interpolateViridis, 
data.children.length +1));

console.log(data.children.length)
root.each(d => d.current = d);

const svg = d3.select('#partitionSVG')
        .style("width", "50%")
        .style("height", "80%")
        .style("font", "10px sans-serif")

const g = svg.append("g")
        .attr('transform', 'translate(' + width/2 +  ',' + height/2 +')');

const path = g.append("g")
        .selectAll("path")
        .data(root.descendants().slice(1))
        .join("path")
        .attr("fill", d => {
            while (d.depth > 1)
                d = d.parent;
            return color(d.data.name);
        })
        .attr("fill-opacity", d => arcVisible(d.current) ? (d.children ? 0.6 : 0.4) : 0)
        .attr("d", d => arc(d.current));

Answer 1

插值器只是获取一个从 0 到 1 的数字来返回颜色。例如:

.style("background-color", function(_, i, n) {
    return d3.interpolateViridis(i / n.length)
})

const body = d3.select("body");
const data = d3.range(100);
const divs = body.selectAll(null)
  .data(data)
  .enter()
  .append("div")
  .style("background-color", function(_, i, n) {
    return d3.interpolateViridis(i / n.length)
  })

div {
  width: 5px;
  height: 100px;
  display: inline-block;
}

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

因此，您唯一需要做的就是传递相反范围内的数字。对于我上面的例子，那将是:

.style("background-color", function(_, i, n) {
    return d3.interpolateViridis((n.length - i)/n.length)
})

const body = d3.select("body");
const data = d3.range(100);
const divs = body.selectAll(null)
  .data(data)
  .enter()
  .append("div")
  .style("background-color", function(_, i, n) {
    return d3.interpolateViridis((n.length - i)/n.length)
  })

div {
  width: 5px;
  height: 100px;
  display: inline-block;
}

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

但是，您的情况更简单:您正在使用 d3.quantize 为序数比例生成数组。像这样:

const values = d3.quantize(d3.interpolateViridis, data.length);

const data = d3.range(100);
const values = d3.quantize(d3.interpolateViridis, data.length);
console.log(values)

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

因此，您只需反转该数组即可:

const values = d3.quantize(d3.interpolateViridis, data.length).reverse();

结果如下:

const body = d3.select("body");
const data = d3.range(100);
const values = d3.quantize(d3.interpolateViridis,
  data.length).reverse();
const divs = body.selectAll(null)
  .data(data)
  .enter()
  .append("div")
  .style("background-color", function(_, i) {
    return values[i];
  })

div {
  width: 5px;
  height: 100px;
  display: inline-block;
}

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