Question

首先对于长标题感到抱歉，我无法想出一个更好的解释我的问题我所拥有的是一个散点图，circles根据我的csv中的d.FamilyName列有不同的ID。一些圈子共享相同的ID。
在该散点图的右侧，我设置了一个div，其中包含所有d.Familyname值的列表，嵌套使它们只显示一次。每个文本的id也由d.FamilyName设置为了提高散点图的可读性，由于它有很多值，我计划在文本上添加event listener鼠标悬停，然后修改与文本共享相同ID的圆的半径。
每个圆都绘制在var circle内，文本绘制在div中，这里是圆圈和文本部分的代码：

var circle = svg.append("g")
                .attr("id", "circles")
                .selectAll("circle")
                .data(dataset)
                .enter()
                .append("circle")
                .attr("cx", function (d) { return x(d.SquadraturaInterna_o); })
                .attr("cy", function (d) { return y(d.SquadraturaEsterna_o); })
                .attr("r", 2)

在radius属性之后有一个事件监听器来显示指定圆的其他值（名称和坐标）但是我认为它们与我的问题无关。文字部分：

d3.select("#elenco")
.select("#value")
.selectAll("text")
.data(nested)
.enter()
.append("p")
.append("text")
.attr("id", function (i) { return (i).key; })
.text(function (i) { return (i).key; })
.on("mouseover", function (d, i) {
            if (this.id == circle.id) 
            {d3.select("circle")
                .attr("r", 5);
            }
            else {d3.select("circle").attr("r", 1);}

        ;})
.on("mouseout", function (d, i) {
            d3.selectAll("circle")
                .attr("r", 2);
    });

问题当然是if statement中的mouseover 任何关于如何解决这个问题的提示都将非常感谢，谢谢！

编辑：感谢@Lars的回复，我可以通过对代码进行一些编辑来完成这项工作，如下所示：

.on("mouseover", function (d) {
    var sel = this.id;
    circle.filter(function() { return this.id === sel; }).attr("r", 5); })
.on("mouseout", function (d, i) {
            d3.selectAll("circle")
                .attr("r", 2); }
    );

Answer 1

我认为你正在寻找这个：

    .on("mouseover", function (d, i) {
        circles.attr('r', function (circle_d, i) { 
            return (d.id == circle_d.id) ? 5 : 1; 
        });
    })

在D3中，访问器函数中的this指的是DOM元素。如果您想将DOM元素的id与圈子的数据ID进行比较，那么您可以执行类似的操作：d3.select(this).attr('id') == circle_d.id（出于性能原因，缓存d3.select(this).attr('id')。）

Answer 2

作为@ musically_ut方法的替代方法，您还可以使用.filter() function仅修改所需的元素。

.on("mouseover", function(d) {
    circle.filter(function() { return this.id === d.FamilyName; }).attr("r", 5);
})
.on("mouseout", function(d) {
    circle.filter(function() { return this.id === d.FamilyName; }).attr("r", 1);
})

通过事件监听器修改圈子元素，匹配圈子的id

2 个答案: