Question

我正在学习d3，但仍然是绝对的初学者，所以如果这很明显，请多多包涵。

我有一个折线图，其中包含多条线（实际上大约150条线），我想在红色到蓝色之间的范围内进行着色。

我设法用类似的方式对行的颜色进行硬编码

var color = d3.scaleOrdinal() 
  .range(["#FF0000",  "#0000FF"]);

但是我显然不想对150种不同的颜色值执行此操作。有没有直接的方法可以实现这一目标？

Answer 1

您没有指定如何选择每一行。我假设这是根据他们的索引，而不是任何绑定的基准。既然如此，一个简单的线性标尺...

const scale = d3.scaleLinear()
    .domain([0, 149])
    .range(["#FF0000",  "#0000FF"]);

...可以工作，将索引传递给它。

这是一个演示：

const scale = d3.scaleLinear()
  .domain([0, 149])
  .range(["#FF0000", "#0000FF"]);

d3.select("body").selectAll(null)
  .data(d3.range(150))
  .enter()
  .append("div")
  .style("background-color", (_, i) => scale(i))

div {
  width: 10px;
  height: 10px;
  margin-right: 2px;
  display: inline-block;
}

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

但是，如果出于任何原因要使用序数刻度，则无需手动创建范围内的每种颜色。您可以使用D3插值器创建数组，如下所示：

const interpolator = d3.interpolateRgb("#FF0000", "#0000FF");
const colors = d3.range(150).map(t => interpolator(t / 149));

然后，您只需要将该数组传递到序数标度的范围即可：

var color = d3.scaleOrdinal() 
    .range(colors);

这是演示：

const interpolator = d3.interpolateRgb("#FF0000", "#0000FF");
const colors = d3.range(150).map(t => interpolator(t / 149));

console.log(colors)

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

多行颜色范围

1 个答案: