如何 select 散点图中的一个点并显示有关它的数据?
How can I select a dot from a scatter and display data about it?
我使用 dc.js 创建了一个散点图。在 plotly 上,有一个函数允许您从散点图中 select 一个点。我希望能够 select 来自散点图的一个点,以某种方式突出显示它并在不同的列上显示关于它的所有可用数据。
我尝试使用事件侦听器,'renderlet'。我可以在控制台中显示点的坐标,但仅此而已。
charts[i].on('renderlet', function(chart, filter) {
chart.selectAll('path.symbol').style('cursor', 'pointer').on('click', function(d) {
var points = [d.key[0], d.key[1]];
chart.selectAll('path.symbol')
.data(points)
.enter().attr("fill", "black")
console.log(points)
})
// chart.select('display-qux').text("how is it");
});
目前我能得到的只有这个:
https://i.ibb.co/nLzp9Th/what-i-have.png
当我点击该点时,坐标会显示在控制台中。
dc.js 没有任何内置的显示属性,因此您需要在某处创建一个 div 并用您在点击时收到的数据填充它。
至于为点击的点着色,dc.js 在散点图中没有点击选择点,您不希望它在一个点上进行过滤。
所以你在正确的轨道上自己实施它;你只需要改变那个点的颜色。
使用颜色指示选择
由于您在点的点击处理程序中,因此您拥有 this
中的元素,最简单的方法是
d3.select(this).attr("fill", "black")
问题是图表不知道你做了什么,当它重绘时它会变回颜色。所以更好的方法是跟踪选择,例如全局变量,然后在 colorAccessor
和 return 中检查所选点的不同颜色:
var _selection = null;
.colorAccessor(function(d) {
if(_selection) {
if(d.key[0] === _selection[0] && d.key[1] === _selection[1])
return 5; // or a value that makes sense with your color scale
}
return chart._groupName; // or whatever color logic you use
})
chart.on('renderlet', function(chart) {
chart.selectAll('path.symbol').style('cursor', 'pointer').on('click', function(d) {
_selection = d.key;
chart.redraw();
})
})
使用大小表示选择
不幸的是the dc.js scatter plot does not currently support a size accessor。肯定有用!
我试着摆弄 transform,但我无法让它工作,因为这也是散点图已经控制的参数之一。
一种仍然免费的编码是点的笔画轮廓。默认情况下它在 dc.css 中设置为 stroke: none
但我通过用 .style()
.
覆盖它得到了一些不错的结果
stroke-width
为 8:
stroke-width
25(这到底是什么意思):
chart.on('pretransition', function(chart) {
chart.selectAll('path.symbol').style('cursor', 'pointer')
.style('stroke-width',
d => (_selection && d.key[0] === _selection[0] && d.key[1] === _selection[1]) ?
25 : null)
.style('stroke',
d => (_selection && d.key[0] === _selection[0] && d.key[1] === _selection[1]) ?
'green' : null)
.on('click', function(d) {
_selection = d.key;
chart.redraw();
})
})
提示(但没有代码,抱歉)在 canvas 模式下实施
如果您在散点图中使用新的(ish)Canvas 支持,则符号没有 DOM,因此有两点在这里不起作用:
- 没有可接收点击事件的符号对象。
- 没有要设置笔划或笔划宽度的符号对象。
抱歉,这只是一个大纲,但使用 dc.js 我想你必须
- 监听对
chart.svg()
(图表 <svg>
元素)的点击
- 使用图表比例将点击坐标转换为数据坐标
- 使用 quadtree to detect if a symbol was hit. or maybe even voronoi/delaunay 进行近似匹配
- 添加一个 SVG 叠加层并在那里绘制一个选择标记
前三个步骤与example you linked相同。第四步是因为目前还没有什么好的方法可以改变符号的绘制方式,绘制完后不重新绘制就无法修改canvas。
请试一试,如果您 运行 遇到麻烦,请再问一个问题。我很乐意试一试,但我认为这个问题和答案已经结束了。
我使用 dc.js 创建了一个散点图。在 plotly 上,有一个函数允许您从散点图中 select 一个点。我希望能够 select 来自散点图的一个点,以某种方式突出显示它并在不同的列上显示关于它的所有可用数据。
我尝试使用事件侦听器,'renderlet'。我可以在控制台中显示点的坐标,但仅此而已。
charts[i].on('renderlet', function(chart, filter) {
chart.selectAll('path.symbol').style('cursor', 'pointer').on('click', function(d) {
var points = [d.key[0], d.key[1]];
chart.selectAll('path.symbol')
.data(points)
.enter().attr("fill", "black")
console.log(points)
})
// chart.select('display-qux').text("how is it");
});
目前我能得到的只有这个:
https://i.ibb.co/nLzp9Th/what-i-have.png
当我点击该点时,坐标会显示在控制台中。
dc.js 没有任何内置的显示属性,因此您需要在某处创建一个 div 并用您在点击时收到的数据填充它。
至于为点击的点着色,dc.js 在散点图中没有点击选择点,您不希望它在一个点上进行过滤。
所以你在正确的轨道上自己实施它;你只需要改变那个点的颜色。
使用颜色指示选择
由于您在点的点击处理程序中,因此您拥有 this
中的元素,最简单的方法是
d3.select(this).attr("fill", "black")
问题是图表不知道你做了什么,当它重绘时它会变回颜色。所以更好的方法是跟踪选择,例如全局变量,然后在 colorAccessor
和 return 中检查所选点的不同颜色:
var _selection = null;
.colorAccessor(function(d) {
if(_selection) {
if(d.key[0] === _selection[0] && d.key[1] === _selection[1])
return 5; // or a value that makes sense with your color scale
}
return chart._groupName; // or whatever color logic you use
})
chart.on('renderlet', function(chart) {
chart.selectAll('path.symbol').style('cursor', 'pointer').on('click', function(d) {
_selection = d.key;
chart.redraw();
})
})
使用大小表示选择
不幸的是the dc.js scatter plot does not currently support a size accessor。肯定有用!
我试着摆弄 transform,但我无法让它工作,因为这也是散点图已经控制的参数之一。
一种仍然免费的编码是点的笔画轮廓。默认情况下它在 dc.css 中设置为 stroke: none
但我通过用 .style()
.
stroke-width
为 8:
stroke-width
25(这到底是什么意思):
chart.on('pretransition', function(chart) {
chart.selectAll('path.symbol').style('cursor', 'pointer')
.style('stroke-width',
d => (_selection && d.key[0] === _selection[0] && d.key[1] === _selection[1]) ?
25 : null)
.style('stroke',
d => (_selection && d.key[0] === _selection[0] && d.key[1] === _selection[1]) ?
'green' : null)
.on('click', function(d) {
_selection = d.key;
chart.redraw();
})
})
提示(但没有代码,抱歉)在 canvas 模式下实施
如果您在散点图中使用新的(ish)Canvas 支持,则符号没有 DOM,因此有两点在这里不起作用:
- 没有可接收点击事件的符号对象。
- 没有要设置笔划或笔划宽度的符号对象。
抱歉,这只是一个大纲,但使用 dc.js 我想你必须
- 监听对
chart.svg()
(图表<svg>
元素)的点击 - 使用图表比例将点击坐标转换为数据坐标
- 使用 quadtree to detect if a symbol was hit. or maybe even voronoi/delaunay 进行近似匹配
- 添加一个 SVG 叠加层并在那里绘制一个选择标记
前三个步骤与example you linked相同。第四步是因为目前还没有什么好的方法可以改变符号的绘制方式,绘制完后不重新绘制就无法修改canvas。
请试一试,如果您 运行 遇到麻烦,请再问一个问题。我很乐意试一试,但我认为这个问题和答案已经结束了。