点缀D3 SVG圆包图

Question

我的D3 circle pack 看起来像这样：（也可以通过jsfiddle 访问）

但是，我希望图表看起来像这样：（不要注意标签或圆圈包的位置，它们对我的情况不是必需的；我的意思是只显示圆圈的“3d”外观，并且他们的颜色）

实现这一目标的好方法是什么？

---

@Delapouite 回答后，我整理了另一个jsfiddle：

关键代码是：

var data2 = pack.nodes(data);

var grads = svg.append("defs").selectAll("radialGradient")
    .data(data2)
   .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", "navy");

和

var circles = vis.append("circle")
    .attr("stroke", "black")
    .attr("fill", function(d, i) {
        return !d.children ? "url(#grad" + i + ")" : "beige";
    })
    .attr("cx", function(d) { return d.x; })
    .attr("cy", function(d) { return d.y; })
    .attr("r", function(d) { return d.r; });

Answer 1

您可以通过对圆的填充属性应用柔和的径向渐变来伪造每个球的 3D 效果：

https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Gradients