Question

我正在尝试反转此朝阳可视化的色带。它使用带有标签等的旭日形可缩放图表。通常，您只需要反转它们使用的范围内的值，但我不太了解它如何获取设置值。

这是我正在使用的配色方案 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>

如何反转d3色阶d3色阶d3.interpolateViridis

1 个答案: