изменить элементы круга прослушивателем событий по совпадению текста круга круга

Question

Прежде всего, извините за длинный заголовок, я не смог придумать лучшего, чтобы объяснить мою проблему.
У меня есть диаграмма рассеяния, с circles, которые имеют разные идентификаторы на основе столбца d.FamilyName в моем csv. Некоторые круги имеют один и тот же идентификатор.
Справа от этой диаграммы рассеяния я настроил div, содержащий список всех значений d.Familyname, вложенных, чтобы они отображались только один раз. Идентификатор каждого текста также задается именем d.FamilyName.
Чтобы улучшить читаемость диаграммы рассеяния, поскольку она имеет много значений, я планировал добавить на текст event listener на наведении курсора мыши, который затем должен изменить радиус кругов, разделяющих один и тот же идентификатор, как текст.
Каждый круг строится внутри 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) 

После радиуса атрибута есть слушатель событий, чтобы показать остальные значения (имя и координаты), но они не имеют отношения к моей проблеме, я думаю. Текстовая часть:

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.
Любой намек на то, как решить это, будет действительно оценен, спасибо!

EDIT: Благодаря ответ @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

В качестве альтернативы подходу @ 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); 
}) 

Answer 2

Я думаю, что вы ищете это:

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

В D3 this в функциях доступа относится к элементу DOM. Если вы хотите сравнить id элемента DOM с идентификаторами данных окружности, вы можете сделать что-то вроде этого: d3.select(this).attr('id') == circle_d.id (кеш d3.select(this).attr('id') по соображениям производительности).