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

以下是

D3

集群部队布局图：

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

---

根据您的要求使用不同的颜色创建线性或径向渐变。将填充属性设置为渐变

var gradient = svg.append("svg:defs")
  .append("svg:linearGradient")
    .attr("id", "gradient")
    .attr("x1", "0%")
    .attr("y1", "0%")
    .attr("x2", "100%")
    .attr("y2", "100%")
    .attr("spreadMethod", "pad");

gradient.append("svg:stop")
    .attr("offset", "0%")
    .attr("stop-color", "#0c0")
    .attr("stop-opacity", 1);

gradient.append("svg:stop")
    .attr("offset", "100%")
    .attr("stop-color", "#c00")
    .attr("stop-opacity", 1);

var node = svg.selectAll("circle")
    .data(nodes)
    .enter().append("circle")
    .style("fill", "url(#gradient)")
    .call(force.drag);

---

根据您的要求，使用不同的颜色创建线性或径向渐变。将填充属性设置为渐变

var gradient = svg.append("svg:defs")
  .append("svg:linearGradient")
    .attr("id", "gradient")
    .attr("x1", "0%")
    .attr("y1", "0%")
    .attr("x2", "100%")
    .attr("y2", "100%")
    .attr("spreadMethod", "pad");

gradient.append("svg:stop")
    .attr("offset", "0%")
    .attr("stop-color", "#0c0")
    .attr("stop-opacity", 1);

gradient.append("svg:stop")
    .attr("offset", "100%")
    .attr("stop-color", "#c00")
    .attr("stop-opacity", 1);

var node = svg.selectAll("circle")
    .data(nodes)
    .enter().append("circle")
    .style("fill", "url(#gradient)")
    .call(force.drag);

解决方案的一部分。它是基于

---

对于每个节点，定义一个渐变：

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

解决方案。它是基于

---

对于每个节点，定义一个渐变：

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