将图例添加到 dc.js 散点图

Question

与 this question 有点相关。

我想使用 dc.js 向散点图添加图例，理想情况下可以根据相应图例的 hover/click 突出显示点。 source code 似乎表明 color 是散点图的 "legendable"，但我找不到任何这样做的例子。

运行浏览器中的以下代码触发错误：

tmp.html:26 Uncaught TypeError: Cannot read property 'key' of undefined at Object.myChart.dimension.group.colorAccessor.d (tmp.html:26) at Object._chart.getColor (color-mixin.js:149) at Object._chart.legendables (scatter-plot.js:360) at Object._legend.render (legend.js:45) at Object._chart.render (base-mixin.js:703) at Object.dc.renderAll (core.js:230) at tmp.html:33

<!DOCTYPE html><html><head><title></title>
    <link rel="stylesheet" type="text/css" href="dc.css"/>
    <script type="text/javascript" src="https://d3js.org/d3.v5.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/crossfilter2/1.4.6/crossfilter.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/dc/3.0.9/dc.js"></script>
</head><body>
<div id="chart"></div>
<script type="text/javascript">

dc.config.defaultColors(d3.schemeCategory10);
var myChart = dc.scatterPlot("#chart");

let input = [{x:0,y:0,c:1}, {x:1,y:1,c:0},{x:0.5,y:0.5,c:2}];
(function(data) {

    var ndx = crossfilter(input),
        dims = ndx.dimension( d => [+d.x,+d.y,+d.c]),
        grp = dims.group();

    myChart
        .dimension(dims)
        .group(grp)
        .colorAccessor(d=> +d.key[2])
        .x(d3.scaleLinear().domain(d3.extent(d3.extent(input, d => +d.x))))
        .valueAccessor(d => +d.key[1])
        .brushOn(false)
        .legend(dc.legend().x(750).y(10).itemHeight(13).gap(5));
})(input);

dc.renderAll();
</script></div></body></html>

Answer 1

是的，不幸的是这是一个很久以前报告的错误，但一直没有修复。散点图调用 _chart.getColor() 没有参数。

https://github.com/dc-js/dc.js/issues/1138#issuecomment-217861014

即使它是固定的，它也只会返回一个传奇，所以我认为它只适用于散点系列的情况。如果您想在图表中显示每种颜色的图例项，您必须自己生成该数据：

myChart.legendables = function () {
    var byColor = {};
    myChart.group().all().forEach(function(d) {
        var color = myChart.colors()(myChart.colorAccessor()(d));
        byColor[color] = {
            chart: myChart,
            name: 'color ' + myChart.colorAccessor()(d),
            color: color
        };
    })
    return Object.values(byColor);
};

也许图表应该自动执行此操作。一个复杂的问题是目前没有为颜色定义任何名称 - 在这里我只是粘贴 'color ' 和颜色访问器返回的值，但您可能在实际数据集中有更好的名称。

Fork of your fiddle.

将图例添加到 dc.js 散点图

add legend to dc.js scatterplot

legend

scatter-plot

d3.js

dc.js