d3 mauvaise application d'un effet de lumière à un cercle

Question

Je suis en train d'appliquer un filtre « feDiffuseLighting et feSpecularLighting », selon ce tutoriel: https://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html#filters

J'ai besoin du centre de lumière se déplaçant en même temps que le cercle en cours d'élaboration.

J'ai écrit le code suivant avec l'intention que le centre du projecteur soit le centre du cercle. Mais il dessine le cercle mais il n'applique pas l'effet de lumière ....:

var svg = d3.select("svg"); 
svg.selectAll("circle") 
    .data(data) 
    .enter() 
    .append("circle") 
     .attr("cx", function(d){return d.x}) 
     .attr("cy", function(d){return d.y}) 
     .attr("r", 10) 
     .attr("fill","white") 
     .append("filter") 
     .attr("width", "100%") 
     .attr("height", "100%") 
     .append("feSpecularLighting") 
     .attr("specularExponent","25") 
     .attr("lighting-color","yellow") 
     .append("fePointLight") 
     .attr("x", function(d){return d.x}) 
     .attr("y", function(d){return d.y})   
     .attr("z","8"); 

Une idée?

Answer 1

Cette syntaxe n'est pas appropriée pour l'utilisation du filtre dans d3. Vous devez ajouter l'élément filtrant à un parent defs avec un identifiant, puis ajoutez un filtre attribut à l'élément de cercle se référant à elle alias:

.attr("filter","url(#light-me") 

Voir d'autres questions (par exemple SVG filter using d3 js not working in IE) pour une utilisation correcte