Динамическая легенда, основанная на данных

Question

Я создал легенду в своей визуализации D3, и легенда в настоящее время включает в себя все возможные «транспортные средства» и их цветовое обозначение.

Я установил цвета, как так:

var color = d3.scale.ordinal() 
    .domain(['bike', 'motorcycle', 'car', 'van', 'truck']) 
    .range(['#00986F', '#41A5D1', '#695998', '#E2595B', '#AA595B']); 

... и я использую эту шкалу так:

var vehiclesLegend = vehiclesLegendWrapper.selectAll('.vehiclesLegendSquare') 
    .data(color.range()) 
    .enter().append('g') 
    .attr('class', 'vehiclesLegendSquare')... 

Проблема заключается в том, что не все мои наборы данных содержат все возможные поэтому моя легенда все равно покажет «грузовик», например, даже когда в данных нет грузовиков.

Есть ли простой способ исключить определенные обозначения транспортных средств/цветов из легенды на основе набора данных?

Answer 1

Много способов решить эту проблему. Я бы просто использовать filter с доменом:

var vehiclesLegend = vehiclesLegendWrapper.selectAll('.vehiclesLegendSquare') 
    .data(color.domain()) //<-- going to use domain instead 
    .enter().append('g') 
    .filter(function(d){ 
    return (d in dataset); //<-- d would be 'truck', 'car', etc.. (pseduo-code, fix for your real dataset) 
    }) 
    .attr('class', 'vehiclesLegendSquare') 
    ... 
    .style('fill', function(d) { 
    return color(d); //<-- back to color 
    })