javascript - D3 : Select a circle by x and y coordinates in a scatter plot

Question

d3.js 中是否有可能通过元素的位置(即 x 和 y 坐标)来选择元素？我有一个包含大量数据的散点图。我还有一个坐标数组。具有这些坐标的点应该是红色的。我正在为此做这样的事情:

bestHistory() {
            var that = this;
            var best = d3.select("circle")
            .attr("cx", that.runData[0].best_history[0].scheduling_quality)
            .attr("cy", that.runData[0].best_history[0].staffing_cost)
             .classed("highlighted", true)
        } 

此方法应将某些位置上的圆圈的类属性设置为突出显示。

然后是适当的 CSS:

circle.highlighted {
    fill: red;
}

但是这个点变成红色并消失了。

我怎样才能实现我想要的目标？

Answer 1

您可以计算每个点到兴趣点的实际距离，并根据该距离确定点的颜色，如下所示:

var threshold=...
var p =...
d3.select('circle').each(function(d){
    var x = p.x - d.x;
    var y = p.y - d.y;
    d.distance = Math.sqrt(x*x + y*y);
}).attr('fill', function(d){
    return d.distance < threshold? 'red' : 'blue'
})

诗。抱歉，通过手机接听