色阶域无法正确显示

Question

我在散点图上的圆圈上应用色标时遇到了一些麻烦。
我设置比例的方法是：

var color = d3.scale.ordinal()
            .domain(d3.extent(dataset, function (d) { return parseFloat(d.Weight); }))
            .range(["#D6F5D6", "#ADEBAD", "#84E184", "#5BD75B","#32CD32"]);

然后将颜色应用于圆圈：

.attr("fill", function (d) { return color(d.Weight) }

但从图中我可以看出颜色不正确，实际上我看到一些颜色较浅的值更高。我认为问题是值读取像字符串一样，事实上如果我执行控制台日志，那么非min或max的值将显示为字符串，我相信这是我错误的颜色值的问题 我还尝试将每个d.Weight设置为域中的数字，如下所示：

dataset.forEach(function (d) { d.Weight = +d.Weight; });

但它也不起作用。附上这是我得到的图像： X轴设置为重量，因此点的颜色应从左到右从较浅到较暗，但显然不是：

感谢任何帮助，谢谢！

编辑忘记提及我尝试使用scale.linear()但是我得到了这个结果： 只有第一个值被圆圈选中

Answer 1

序数尺度与线性尺度的工作方式不同，因为域元素之间没有插值。引用文档：

  

值中的第一个元素将映射到输出范围中的第一个元素，第二个域值将映射到第二个范围值，依此类推。

这意味着您的输入值未正确映射，因为您只使用min和max来设置域。出于您的目的，您可能需要线性刻度。

使用线性刻度时，您必须告诉D3如何插值输出范围的值，例如

.range(["#D6F5D6", "#ADEBAD", "#84E184", "#5BD75B","#32CD32"])
.interpolate(d3.interpolateRgb);

请注意，在这种情况下，您还需要提供与输出值相同数量的输入值：

  

虽然线性比例通常在其域中只有两个数值，但您可以为多线性比例指定两个以上的值。在这种情况下，输出范围内必须有相同数量的值。

在您的情况下，简单地采用最小值和最大值以及两种极端颜色是最容易的。