D3 force layout - 如何实现节点的 3D 外观？答案

【问题标题】：D3 force layout - How to achieve 3D look of nodes?D3 force layout - 如何实现节点的 3D 外观？
【发布时间】：2014-07-10 09:59:50
【问题描述】：

这里是jsfiddle 的D3 集群力布局：

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

【问题讨论】：

标签： javascript svg d3.js 3d force-layout

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

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

【讨论】：