dc.js:使用图像作为图例

Question

​

​

我希望使用图像(图标或svg)，而不是饼图图例的默认矩形。在dc.js中可以这样做吗？

例如：

​

​

非常感谢。

Answer 1

这个特性不是内置的，但它通常很容易“逃到d3”，并根据您的需要定制图表。

在这种情况下，我们希望等到图表呈现出来，然后用图像替换矩形：

chart.on('pretransition', function(chart) { // 1
   var items = chart.selectAll('.dc-legend .dc-legend-item'); // 2
   items.selectAll('rect').remove(); // 3
   var images = items.selectAll('image').data(function(x) { // 4
       return [x];
   });
   images.enter().append('image').attr({ // 5
       width: 25,
       height: 25,
       href: function(leg) { return _icons[leg.name]; }
   });
   console.log('items', items.data());
});

1. 等待图表渲染/重绘
2. 选择图例项
3. 删除每一项下的任何rect (如果这是一个线状图，则必须查找line
4. 选择任何现有的图像(返回单个项数组的“诀窍”是为了使我们能够干净地替换任何存在的图像，而不是继续添加更多的图像)。
5. 并设置image --在本例中，我使用了在CDN上可以找到的第一个SVG图标；我们使用一个对象将堆栈名映射到SVG。

最后，我们还需要设置图例的项目高度以匹配图像高度：

chart.legend(dc.legend().itemHeight(25));

示例输出：

​

​

小提琴示例：https://jsfiddle.net/gordonwoodhull/Lss5wsz6/9/