如何 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();
        })
})

Example fiddle.

提示(但没有代码,抱歉)在 canvas 模式下实施

如果您在散点图中使用新的(ish)Canvas 支持,则符号没有 DOM,因此有两点在这里不起作用:

  1. 没有可接收点击事件的符号对象。
  2. 没有要设置笔划或笔划宽度的符号对象。

抱歉,这只是一个大纲,但使用 dc.js 我想你必须

  1. 监听对 chart.svg()(图表 <svg> 元素)的点击
  2. 使用图表比例将点击坐标转换为数据坐标
  3. 使用 quadtree to detect if a symbol was hit. or maybe even voronoi/delaunay 进行近似匹配
  4. 添加一个 SVG 叠加层并在那里绘制一个选择标记

前三个步骤与example you linked相同。第四步是因为目前还没有什么好的方法可以改变符号的绘制方式,绘制完后不重新绘制就无法修改canvas。

请试一试,如果您 运行 遇到麻烦,请再问一个问题。我很乐意试一试,但我认为这个问题和答案已经结束了。