Hover issue с ​​эффектом градиента окружности

Question

Я изменил этот код: http://jsfiddle.net/LjsnD/, чтобы включить эффекты курсора мыши, но в кластерах есть цветное кровотечение. Есть ли лучший способ добиться этого, вместо того, чтобы повторять код grad? https://jsfiddle.net/sjp700/pten28uy/2/

var grads2 = svg.append("defs").selectAll("radialGradient2") 
     .data(nodes) 
    .enter() 
     .append("radialGradient") 
     .attr("gradientUnits", "objectBoundingBox") 
     .attr("cx", 0) 
     .attr("cy", 0) 
     .attr("r", "100%") 
     .attr("id", function (d, i) { return "grad2" + i; }); 

    grads2.append("stop") 
     .attr("offset", "0%") 
     .style("stop-color", "white"); 

    grads2.append("stop") 
     .attr("offset", "100%") 
     .style("stop-color", function (d) { 
      console.log(d.cluster); 

      return color2(d.cluster); 
     }); 

Answer 1

Проблема: идентификаторы имеют быть уникальным.

В вашем коде вы дублируете некоторые идентификаторы. Для вас grads, вы установите ID с помощью этого кода:

grads.attr("id", function (d, i) { return "grad" + i; }); 

И для grads2, вы использовали это:

grads2.attr("id", function (d, i) { return "grad2" + i; }); 

Теперь давайте посмотрим: что произойдет, если i 21 до grad и i от 1 до grad2? Вы будете иметь два одинаковых идентификаторов:

grad + 21//gives you 'grad21' 
grad2 + 1//gives you 'grad21' 

Решение простое: использовать буквы вместо:

grads.attr("id", function (d, i) { return "gradA" + i; }); 
grads2.attr("id", function (d, i) { return "gradB" + i; }); 

Вот ваш обновленный скрипку: https://jsfiddle.net/gerardofurtado/gs6eem6m/1/