0

Here is jsfiddle of D3 cluster force layout:

enter image description here

How to achieve 3D look of nodes similar to this picture: (don't pay attention on diagram itself, this is just illustration of "look" of circles)

enter image description here

2 Answers 2

4

Here is jsfiddle of the solution. It is based on SVG radial gradients.


For each node, a gradient is defined:

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

Then, instead of line:

.style("fill", function(d) { return color(d.cluster); })

this line is added in the code that creates circles:

.attr("fill", function(d, i) {
    return "url(#grad" + i + ")";
})

This produces this effect:(animated gif that I used has some limitations for number of colors, so gradients are not smooth as in real example)

enter image description here

2

Create linear or radial gradient based on your requirement using different colors. Set fill attribute as gradient.

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.