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

【问题标题】：D3 fill color using custom scaleD3 使用自定义比例填充颜色
【发布时间】：2019-06-12 09:19:43
【问题描述】：

我有这段代码，我想相对于值对弧进行着色，传递两种颜色的范围（即 ['#f00', '#ff0]）。

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

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

这是我想要实现的代码笔

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

这就是我尝试但没有成功的方法

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

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.2.0/d3.min.js"&gt;&lt;/script&gt;

【问题讨论】：

您希望弧线在 1% 时为全红，在 99% 时为全蓝，还是从红到蓝渐变？
渐变，我希望颜色取决于值
喜欢this question?
不，这是渐变。我需要的是，如果它是 100%，填充是 #0f0，如果是 50%，它介于 #f00 和 #0f0 之间。
是的，当它充满时，它就像渐变（忘记我的旧评论，我看错了）。第一次没看懂，不好意思

标签： d3.js charts data-visualization

【解决方案1】：

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

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

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

console.log(colorScale(75));

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.2.0/d3.min.js"&gt;&lt;/script&gt;

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

【讨论】：