javascript - 基于数据的动态图例

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