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

基于数据的动态图例

1 个答案: