使用 d3.js scale ordinal 返回不在域中的项目的默认颜色答案

【问题标题】：Returning default color for items not in domain, using d3.js scale ordinal使用 d3.js scale ordinal 返回不在域中的项目的默认颜色
【发布时间】：2018-11-08 23:03:59
【问题描述】：

如果域中不存在项目，是否可以设置 scaleOrdinal 以返回默认颜色？

例如：

var type = d3.scaleOrdinal()
        .domain(['WeWork', 'Regus', 'Spaces', 'Knotel', 'RocketSpace', 'HQ Global Workspaces'])
        .range(['red', 'blue', 'green', 'purple', 'yellow', 'orange', 'pink']);

对于不属于该域中 6 家公司之一的所有公司，我希望将它们涂成灰色。有没有一种简单的方法可以在没有一堆额外代码的情况下做到这一点？谢谢！

【问题讨论】：

标签： javascript html d3.js leaflet

【解决方案1】：

使用scaleOrdinal.unknown:

var type = d3.scaleOrdinal()
        .domain(['WeWork', 'Regus',...])
        .range(['red', 'blue',...])
        .unknown("grey");

这会为未知输入分配一个值：

ordinal.unknown([值])

如果指定了值，则将标尺的输出值设置为未知输入值并返回此比例。如果未指定值，返回当前未知值，默认为隐式。这隐式值启用隐式域构造；看序数域。 (from the docs)

这就是它的工作原理：

var type = d3.scaleOrdinal()
        .domain(['WeWork', 'Regus'])
        .range(['red', 'blue'])
        .unknown("grey");
        
        
var data =  ['WeWork', 'Regus', 'Spaces', 'Knotel', 'RocketSpace', 'HQ Global Workspaces'];

var svg = d3.select("body")
  .append("svg");
  
svg.selectAll("rect")
 .data(data)
 .enter()
 .append("rect")
 .attr("x", function(d,i) { return i * 40 + 50; })
 .attr("y", 40)
 .attr("width", 30)
 .attr("height", 30)
 .attr("fill", type);

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

【讨论】：