基于 dc.js 复合图表中条形颜色的自定义图例答案

【问题标题】：Custom legend based on color of bars in a dc.js composite chart基于 dc.js 复合图表中条形颜色的自定义图例
【发布时间】：2017-12-20 05:47:05
【问题描述】：

我实现了一个包含两个条形图的复合图表，其中一个条形图由具有不同颜色条形的条形组成。现在，我想创建一个代表每个颜色条的自定义图例（类似于用于饼图的https://dc-js.github.io/dc.js/examples/pie-external-labels.html）。下面是我到目前为止所做的代码sn-p：

var buttonPress = dc.barChart(composite)
    .dimension(joyTimeDimension)
    //.renderlet(colorRenderlet)
    //.colors('red')
    .colors(colorbrewer.Set1[5])
    .colorDomain([101, 105])
    .colorAccessor(function (d) {
        return d.value;
    })
    .group(btnGroup, "Button Press")
    .keyAccessor(function(d) {return d.key[0];})
    .valueAccessor(function (d) {
        return d.value;
    })
    .title( function(d){ 
        return [
            "Time: "+d.key[0],
            "button Name: "+d.key[1],
            "button: "+ d.value
        ].join('\n')
    });


var joyStick = dc.barChart(composite)
    .dimension(joyTimeDimension)
    .colors('blue')
    .group(stepperGroup,"Joy Stick Movement")
    .keyAccessor(function(d) {return d.key[0];})
    .title( function(d){ 
        return [
            "Time: "+d.key[0],
            "Stepper Position: "+ d.value
        ].join('\n')
  });
  composite
    .width(1200)
    .transitionDuration(500)
    .margins({top: 30, right: 50, bottom: 25, left: 40})
    .x(d3.time.scale().domain([startDate,currDate]))
    .xUnits(function(){return 150;})
    //.xUnits(d3.time.second)
    .elasticY(true)
    .legend(dc.legend().x(1000).y(4).itemHeight(13).gap(5))
    .renderHorizontalGridLines(true)
    .renderTitle(true)
    .shareTitle(false)
    .compose([buttonPress, joyStick])
    .brushOn(false)

有没有办法为此场景创建自定义图例？提前致谢。

【问题讨论】：

标签： d3.js legend dc.js

【解决方案1】：

让我提供一些关于如何构建图例的背景。

dc.js 中的图例实际上并没有那么复杂。它只是在图表上调用.legendables()，图表决定在图例中显示哪些项目。

每个图表都有自己的专用代码。

如果我们查看source for compositeChart.legendables()，它只是递归地获取每个子图表的图例并将它们连接起来：

_chart.legendables = function () {
    return _children.reduce(function (items, child) {
        if (_shareColors) {
            child.colors(_chart.colors());
        }
        items.push.apply(items, child.legendables());
        return items;
    }, []);
};

饼图creates a legendable for each pie slice：

_chart.legendables = function () {
    return _chart.data().map(function (d, i) {
        var legendable = {name: d.key, data: d.value, others: d.others, chart: _chart};
        legendable.color = _chart.getColor(d, i);
        return legendable;
    });
};

条形图的legendables来自stack mixin，creates a legendable for each stack:

_chart.legendables = function () {
    return _stack.map(function (layer, i) {
        return {
            chart: _chart,
            name: layer.name,
            hidden: layer.hidden || false,
            color: _chart.getColor.call(layer, layer.values, i)
        };
    });
};

鉴于目前无法让条形图显示饼图的图例，我认为最简单的方法是使用自定义颜色覆盖条形图的 legendables：

buttonPress.legendables = function() {
    return btnGroup.all().map(function(kv) {
        return {
            chart: buttonPress,
            // display the value as the text (not sure what you want here)
            name: kv.value,
            // apply the chart's color scale to get the color
            color: buttonPress.colors()(kv.value)
        };
    })
};

可能还有更多细节需要解决，例如如果相同的值出现两次怎么办？我假设您可以从组中读取输入数据并 .map() 它，但您可能需要以不同的方式生成数据。

但这应该给出一般的想法。 Lmk 如果它不起作用，我会很高兴跟进。

【讨论】：