svg - 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; });