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

Question

这是集群力布局的jsfiddleD3：

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

Answer 1

这是解决方案的jsfiddle。它基于SVG 径向渐变。

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

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 对颜色数量有一些限制，因此渐变不像真实示例中那样平滑）