Dynamische Legende basierend auf Daten

Question

Ich habe eine Legende in meiner D3-Visualisierung eingerichtet und die Legende enthält derzeit alle möglichen "Fahrzeuge" und ihre Farbbezeichnung.

stelle ich die Farben wie folgt:

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

... und ich verwende diese Skala in etwa so:

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

Das Problem ist, dass nicht alle meine Datensätze alle möglichen enthalten Fahrzeuge, so wird meine Legende zum Beispiel immer noch "LKW" zeigen, auch wenn keine LKWs in den Daten sind.

Gibt es eine einfache Möglichkeit, bestimmte Fahrzeug/Farbkombinationen aus der Legende basierend auf dem Datensatz auszuschließen?

Answer 1

Viele Möglichkeiten, dies zu lösen. Ich habe gerade ein filter mit der Domäne verwenden:

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 
    })