Question

我有这段代码，我想根据值相对于圆弧着色，并传递两种颜色（即['＃f00'，'＃ff0]）。

我找不到一种方法来声明能为我构建正确颜色的比例尺。

我在文档上也找不到任何东西...

这是我想在其中实现的Codepen

https://codepen.io/adeveloperdiary/pen/OydzpG

这是我尝试失败的方式

 const colorRange = ['#f00', '#0f0'];
 
 const colorScale = d3.scaleOrdinal()
    .range([0, 100])
    .domain(colorRange);
    
 console.log(colorScale(75));

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

Answer 1

您需要线性刻度，而不是序数刻度。另外，交换域和范围：

const colorRange = ['#f00', '#0f0'];

const colorScale = d3.scaleLinear()
  .domain([0, 100])
  .range(colorRange);

console.log(colorScale(75));

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

以下是您与该比例尺关联的CodePen（使用D3 v3）：https://codepen.io/anon/pen/RzNYvy

D3使用自定义比例填充颜色

1 个答案: