d3 falsche Anwendung eines Lichteffekt zu einem Kreis

Question

Ich versuche, einen „feDiffuseLighting und feSpecularLighting“ Filter anwenden nach diesem Tutorial: https://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html#filters

Ich brauche das Zentrum des Lichts mit dem Kreis bewegt zusammengezogen werden.

Ich schrieb den folgenden Code mit der Absicht, dass das Zentrum des Strahlers das Zentrum des Kreises ist. Aber es zieht den Kreis, aber es gilt nicht den Lichteffekt ....:

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"); 

Irgendeine Idee?

Answer 1

Dies ist keine korrekte Syntax für die Filterverwendung in d3. Sie müssen das Filterelement zu einem defs Elternteil mit einem id hinzuzufügen, und fügen Sie dann einen Filter Attribut zum Kreis Elemente darauf zu verweisen aka:

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

andere Fragen finden (zB SVG filter using d3 js not working in IE) für die ordnungsgemäße Verwendung