Schlagschatten zu vielen D3-Kraftsimulationsknoten hinzufügen?

Question

Ich habe eine D3 v4 Kraftsimulation mit 100 Knoten darin. Jeder Knoten ist ein Bild und ich möchte jedem Bild einen Schlagschatten hinzufügen, aber ich denke, aufgrund der Art und Weise, wie ich den Schlagschatten rendere, skaliert dies nicht. Mit 100 Bildern ohne Schlagschatten läuft es 60fps, aber mit Schlagschatten eher wie 8fps. Gibt es eine Hacky-Lösung oder einen besseren Weg, dies zu tun? Hier ist, was ich jetzt haben (Rendering auf einem Kreis hinter dem Bild):

var dropShadowFilter = this.d3Graph.append('svg:filter') 
    .attr('id', 'drop-shadow') 
    .attr('filterUnits', "userSpaceOnUse") 
    .attr('width', '250%') 
    .attr('height', '250%'); 
dropShadowFilter.append('svg:feGaussianBlur') 
    .attr('in', 'SourceGraphic') 
    .attr('stdDeviation', 2) 
    .attr('result', 'blur-out'); 
dropShadowFilter.append('svg:feColorMatrix') 
    .attr('in', 'blur-out') 
    .attr('type', 'hueRotate') 
    .attr('values', 180) 
    .attr('result', 'color-out'); 
dropShadowFilter.append('svg:feOffset') 
    .attr('in', 'color-out') 
    .attr('dx', 3) 
    .attr('dy', 3) 
    .attr('result', 'the-shadow'); 
dropShadowFilter.append('svg:feBlend') 
    .attr('in', 'SourceGraphic') 
    .attr('in2', 'the-shadow') 
    .attr('mode', 'normal'); 


this.node = this.d3Graph.selectAll(null) 
    .data(Nodes) 
    .enter() 
    .append("g") 
    .attr("class", "nodes"); 

this.node.append("circle") 
    .attr("r", 30) 
    .attr("fill", "red") 
    .style("filter", "url(#drop-shadow)") 

Answer 1

Wenn Sie bereit sind, mehr der schweren zu tun heben sich dann könnte man einen Schlagschatten für einfache Formen betrachten Annäherung von Knoten Hinzufügen hinter jedem Gegenstand und Skalierung, Positionierung und Färbung sie entsprechend.

Im folgenden Beispiel habe ich einen zusätzlichen Kreis erstellt, der etwas größer und vom oberen Schichtkreis versetzt ist. Es hat auch einen benutzerdefinierten fake-shadow radialen Gradienten angewendet.

var d3Graph = d3.select('svg') 
 

 
var dropShadowFilter = d3Graph.append('svg:filter') 
 
    .attr('id', 'drop-shadow') 
 
    .attr('filterUnits', "userSpaceOnUse") 
 
    .attr('width', '250%') 
 
    .attr('height', '250%'); 
 
dropShadowFilter.append('svg:feGaussianBlur') 
 
    .attr('in', 'SourceGraphic') 
 
    .attr('stdDeviation', 2) 
 
    .attr('result', 'blur-out'); 
 
dropShadowFilter.append('svg:feColorMatrix') 
 
    .attr('in', 'blur-out') 
 
    .attr('type', 'hueRotate') 
 
    .attr('values', 180) 
 
    .attr('result', 'color-out'); 
 
dropShadowFilter.append('svg:feOffset') 
 
    .attr('in', 'color-out') 
 
    .attr('dx', 3) 
 
    .attr('dy', 3) 
 
    .attr('result', 'the-shadow'); 
 
dropShadowFilter.append('svg:feBlend') 
 
    .attr('in', 'SourceGraphic') 
 
    .attr('in2', 'the-shadow') 
 
    .attr('mode', 'normal'); 
 

 
var simpleGradient = d3Graph.append('defs') 
 
    .append('radialGradient') 
 
    .attr('id', 'fake-shadow'); 
 
simpleGradient.append('stop') 
 
    .attr('offset', "80%") 
 
    .attr('stop-color', '#01AFAF'); 
 
simpleGradient.append('stop') 
 
    .attr('offset', "100%") 
 
    .attr('stop-color', "#01AFAF00");

body { 
 
    background: papayawhip 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> 
 
<svg height="120" width="600" text-anchor="middle"> 
 
<text x="200" y="105">Original</text> 
 
<text x="400" y="105">Fake Shadow</text> 
 
<circle cx="200" cy="50" r="30" filter="url(#drop-shadow)" fill="red"/> 
 
<circle cx="403" cy="53" r="32.5" fill="url(#fake-shadow)"/> 
 
<circle cx="400" cy="50" r="30" fill="red"/> 
 
</svg>