点缀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