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

这是D3群集力布局的jsfiddle：



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

最佳答案

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