Question

我有一个D3 v4力模拟，其中有100个节点。每个节点都是一个图像，我想为每个图像添加一个阴影，但是，我认为由于我渲染阴影的方式，这不会缩放。有100个没有阴影的图像，它运行60fps但是阴影更像是8fps。是否有一个hacky解决方案或可能是一个更好的方法来做到这一点。这就是我现在所拥有的（渲染图像背后的圆圈）：

import random
var=[]
end=4
for i in range(0,end,1):
 k=random.randint(0,9)
 print k
 if k not in var:
  var.append(k)
 else:
  end+=1

Answer 1

如果你愿意自己做更多的繁重工作，那么你可以考虑通过在每个项目后面添加节点并适当地缩放，定位和着色来为近似形状逼近近似阴影。

在下面的示例中，我创建了一个额外的圆，它稍微大一些并偏离顶层圆。它还应用了自定义fake-shadow径向渐变。

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>

将阴影添加到很多D3力模拟节点？

1 个答案: