Возвращение цвета по умолчанию для элементов, не входящих в домен, используя порядковый номер шкалы d3.js - PullRequest
Новая
       5

Возвращение цвета по умолчанию для элементов, не входящих в домен, используя порядковый номер шкалы d3.js

0 голосов
/ 09 ноября 2018

Есть ли способ установить scaleOrdinal для возврата цвета по умолчанию, если элемент не существует в домене?

Например: 

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

Для всех компаний, которые не входят в число 6 в домене, я хочу, чтобы они были серого цвета. Есть ли простой способ сделать это без лишнего кода? Спасибо!

1 Ответ

0 голосов
/ 09 ноября 2018

Использование scaleOrdinal.unknown: 

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

Это присваивает значение неизвестным входам:

ordinal.unknown ([значение]) <>

Если указано значение, задает выходное значение шкалы для неизвестного введите значения и возвращает эту шкалу. Если значение не указано, возвращает текущее неизвестное значение, по умолчанию неявное. неявное значение позволяет неявное построение домена; увидеть ordinal.domain. ( из документов )

И вот оно на работе: 

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);
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.0.0/d3.min.js"></script>
...