将图例添加到 dc.js 散点图
Posted
技术标签:
【中文标题】将图例添加到 dc.js 散点图【英文标题】：add legend to dc.js scatterplot 【发布时间】：2019-05-08 06:14:30 【问题描述】：与this 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>
【问题讨论】：
【参考方案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 散点图的主要内容，如果未能解决你的问题，请参考以下文章
100天精通Python（可视化篇）——第82天：matplotlib绘制不同种类炫酷散点图参数说明+代码实战（二维散点图三维散点图散点图矩阵）
R语言可视化：散点图散点图和折线图（line charts）3D散点图旋转3D散点图气泡图corrgram包可视化相关性矩阵马赛克图（ Mosaic plots）hexbin密度图