Question

我知道d3.scale.ordinal函数需要精确的x到x映射，即

var color = d3.scale.ordinal()
    .domain(["apple", "durian", "lemon"])
    .range(["red","green","yellow"]);

我的问题是我需要为水果提供我还不知道的颜色（它在我将阅读的数据库中，但它会经常更改），例如 “chiku”，“lychee”等（等等事先未知的水果）。

我想将这些未定义为var颜色的水果分配为“棕色”。

问题： 1.可以做到以上几点？ 2.可以在域中使用regexp吗？例如柠檬。*（用于捕获柠檬X，柠檬等）。

由于

Answer 1

一种可能的解决方案是创建一个将水果映射到颜色的Object，例如

var fruit2color = {apple: "red", durian: "green", lemon: "yellow"}

然后，给定fruits列表，您可以使用map创建颜色范围。 map遍历数组中的每个水果，并返回一个包含每个水果颜色的数组。颜色可以是您放入fruit2color的颜色，或者如果水果没有指定颜色，则仅为'brown'。

var fruits = ["lychee", "chiku", "durian", "plantain", "guava", "apple"];
var colors = fruits.map(function(f){
      return f in fruit2color ? fruit2color[f] : "brown"
    });
var color = d3.scale.ordinal()
    .domain(["apple", "durian", "lemon"])
    .range(colors);

此代码会为您提供

的颜色范围

colors = [ 'brown', 'brown', 'green', 'brown', 'brown', 'red' ]

至于问题的第二部分，您可以使用带有正则表达式的函数fruit2color（而不是对象）来分配颜色，例如

var patt = /lemon./;
function fruit2color(f){
    if (patt.test(f)) return "yellow";
    else if (f == "apple") return "red";
    else if (f == "durian") return "green";
    else return "brown";
}
var colors = fruits.map(fruit2color);

然后将生成的颜色array传递给range()。

d3.js使用通配符的颜色序数？

1 个答案: