d3序数标度中的映射
Mapping in d3 ordinal scales
我使用D3的序数比例,将数字映射到颜色。我用过这个:
color = d3.scale.ordinal().range(["#1f77b4", "#ff7f0e", "#2ca02c", "#d62728", "#9467bd", "#8c564b", "#e377c2"]).domain([0,6]);
console.log(color(0),color(1),color(2),color(3),color(4),color(5),color(6));
我得到的回应是:
#1f77b4 #2ca02c #d62728 #9467bd #8c564b #e377c2 #ff7f0e
我很好奇,答案不应该是:吗
#1f77b4, #ff7f0e, #2ca02c, #d62728, #9467bd, #8c564b, #e377c2
请告知。
域不太正确:
> color.domain()
[0, 6, 1, 0.5]
对于序数范围内的每个值,域中都应该有一个匹配的值。
不应将域设置为[0,6]
,而应为[0, 1, 2, 3, 4, 5, 6]
:
color = d3.scale.ordinal()
.range(["#1f77b4", "#ff7f0e", "#2ca02c", "#d62728", "#9467bd", "#8c564b", "#e377c2"])
.domain(d3.range(0,7));
检查以确保更新颜色后一切正常:
> d3.range(0,7).forEach(function(d){ console.log(color(d)); })
#1f77b4
#ff7f0e
#2ca02c
#d62728
#9467bd
#8c564b
#e377c2
这是意料之中的事,因为您的域中只有2个明确定义的值。因此,第一个值0被分配给#1f77b4
的第一种颜色,第二个值6被分配给第二种颜色#ff7f0e
,并且余数在内部作为字符串排序后被推断。您需要为可预测的行为明确定义域。例如,
color = d3.scale.ordinal()
.range(["#1f77b4", "#ff7f0e", "#2ca02c", "#d62728", "#9467bd", "#8c564b", "#e377c2"])
.domain([0,1,2,3,4,5,6]);
console.log(color(0),color(1),color(2),color(3),color(4),color(5),color(6));
正如文件所述
按顺序设置域是可选的。如果未设置域,则传递给比例函数的每个唯一值将从输出范围中分配一个新值;换句话说,域将从用法中隐含地推断出来然而,分配序数标度的域以确保确定性行为是一个好主意,因为根据用法推断域将取决于排序。
相关文章:
- 如何在映射数组中添加换行符
- ng映射方向备选方案
- 无法通过数组映射绑定
- ReactJS映射:如何仅在url变量不为空时呈现html链接
- 使用Scala Play Framework视图中的键检索映射值
- 淘汰映射;不起作用
- 映射数组ES6时考虑空值
- Lodash映射并返回唯一
- 如何对映射插件创建的敲除对象进行深度复制
- 如果数字已插入排序数组,则获取该数字的索引
- 在javascript中按映射中的值排序
- 使用带有两个参数的函数的javascript映射
- 在内部映射值时渲染方法中断
- JSON:获取映射数据
- HTML Dropdownlist未映射到MVC模型
- 使用Google Maps JavaScript API v3和Geocoding API映射多个位置
- immutable.js与嵌套映射/对象的比较/相等性能
- 从映射返回React渲染数组
- D3 序数刻度:将多个域值映射到同一范围
- d3序数标度中的映射