dc.js饼图图例：仅显示前5名

Question

我正在生成一个饼图（精确的圆环图），它有大约50个项目，但前5个占图表的95％。当我显示图例信息时，它与图表重叠，因为有许多图例项。我想知道是否有一个选项可以将图例显示限制为前5项。

https://github.com/dc-js/dc.js/blob/master/web/docs/api-latest.md#legend

我没有看到任何将图例显示限制为前5或前10的选项。

Answer 1

您可以随时修改dc.js库本身，您可以在图例mixin中执行以下操作：

dc.legend = function () {
...
//START MODIFICATION
var _maxItems;
_legend.maxItems = function(maxItems) {
    _maxItems = maxItems;
    return _legend;
};
//END MODIFICATION
...
_legend.render = function () {
    _parent.svg().select('g.dc-legend').remove();
    _g = _parent.svg().append('g')
        .attr('class', 'dc-legend')
        .attr('transform', 'translate(' + _x + ',' + _y + ')');
    var legendables = _parent.legendables();

    //START MODIFICATION
    if (_maxItems) {
        legendables = legendables.slice(0, _maxItems);
    }
    //END MODIFICATION
...
}