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

【问题标题】：add legend to dc.js scatterplot将图例添加到 dc.js 散点图
【发布时间】：2019-05-08 06:14:30
【问题描述】：

我想使用 dc.js 向散点图添加图例，理想情况下，可以根据相应图例的悬停/单击突出显示点。 source code 似乎表明 color 对于散点图来说是“传奇的”，但我找不到任何这样做的例子。

在浏览器中运行下面的代码会触发错误：

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>

【问题讨论】：

标签： d3.js legend scatter-plot dc.js

【解决方案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.

【讨论】：

您的解决方法似乎是创建一个没有标签的颜色（黑色）的图例，而不是数据的一部分，并且悬停它会使所有现有数据淡出。我将如何从这个变成一个带有与数据对应的标签和颜色的图例？
哎呀，我只解决了崩溃问题。今天我会试着再看看这个。
好的，我已经更新了我的答案，为每种颜色生成了一个图例项。