d3.js - 将许多可能的输入值映射到离散的颜色域

标签 d3.js

我无法理解 d3 上的文档 ordinal scales .我阅读它的方式(以及它对线性刻度的工作方式,我觉得我应该能够像这样继续:

color = d3.scale.ordinal();
color.domain([0, 100]);      // Input is any percentage point 0-100
color.range([                // Output is a scale of colors from "bad" to "good"
  'red','orange','blue','green'
]);

这没有给我预期的结果:

color(0); // "red". Ok, that makes sense
color(1); // "blue". Huh? This should be "red"
color(100); // "orange". Really? I'm confused. What's the range?
color.range(); //["red", "orange", "blue", "green"]. That looks right...
color.domain(); // [0,1,100]. Um...

当我想将输入视为数字时,它看起来像是将输入视为离散的分类值。

最佳答案

将数字范围映射到离散输出的正确方法是使用 quantize .我不清楚其中的区别,序数似乎很直观。现在想通了。

一个可行的解决方案如下所示:

color = d3.scale.quantize();
color.domain([0, 100]);
color.range([
  'red','orange','blue','green'
]);

color(0);  // "red"
color(1);  // "red"
color(99); // "green"

这里的这些链接有助于解决这个问题:

关于d3.js - 将许多可能的输入值映射到离散的颜色域,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29724944/

相关文章:

javascript - D3JS .call() 异常

javascript - 如何在 Vis.js 网络图中设置图像大小

javascript - D 3's "empty”选择是做什么的?

d3.js:如何在圆环图中的标签下方添加值

javascript - 在具有嵌套数据的多行 D3.js 图形上添加点

javascript - 根据对象属性将数据绑定(bind)到现有数量的元素

javascript - D3 - 无法从 csv 获取压缩圆圈

d3.js - 带有数组或 JSON 数据的 D3 堆积图

d3.js - 奇怪的轴行为

javascript - D3 divgrid.js 与 json 数据