javascript - D3 强制布局 - 如何实现节点的 3D 外观？

Question

这里是jsfiddle D3 集群强制布局:

如何实现类似于此图的节点的 3D 外观:(不要注意图表本身，这只是圆圈“外观”的说明)

Answer 1

Here is jsfiddle的解决方案。它基于SVG radial gradients 。

<小时/>

对于每个节点，定义一个梯度:

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

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

grads.append("stop")
    .attr("offset", "100%")
    .style("stop-color",  function(d) { return color(d.cluster); });

然后，代替行:

.style("fill", function(d) { return color(d.cluster); })

这行代码被添加到创建圆圈的代码中:

.attr("fill", function(d, i) {
    return "url(#grad" + i + ")";
})

这会产生这样的效果:(我使用的动画 gif 对颜色数量有一些限制，因此渐变不像真实示例中那样平滑)