通过事件监听器在circle的文本匹配id上修改circle元素

modify circle elements by event listener on text matching id of circle

本文关键字：circle id 元素 修改 事件 监听器 文本      更新时间：2024-01-05

首先，很抱歉标题太长，我想不出更好的标题来解释我的问题
我有一个散点图，其中的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);
    });

问题当然是在mouseover中的if statement上
任何关于如何解决这个问题的提示都将不胜感激，谢谢！

编辑：感谢@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); }
    );

作为@memoicaly_ut方法的替代方案，您还可以使用.filter()函数只修改您想要的元素。

.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);
})

我想你正在寻找这个：

    .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与circle数据的id进行比较，那么您可以执行类似的操作：d3.select(this).attr('id') == circle_d.id（出于性能原因，缓存d3.select(this).attr('id')）。

相关文章：