Question

我想使用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>

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散点图添加图例

1 个答案: