CODEWITHSUNDEEP
javascriptd3.jssvg
KO.
KO.

Reputation: 173

D3 Gradient starting point

I have this circual chart - https://jsfiddle.net/kyleopperman/aacgzxed/ - but i am struggling to get the gradient to start in the center of each segment and fill out to the edge. Can anyone help me with this?

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

gradient.append("stop")
  .attr("offset", "0%")
  .attr("stop-color", "#61B5C3")
  .attr("stop-opacity", 1);

gradient.append("stop")
  .attr("offset", "100%")
  .attr("stop-color", "#5393AC")
  .attr("stop-opacity", 1);

Upvotes: 2

Views: 158

Answers (1)

KO.
KO.

Reputation: 173

Okay I've managed to figure this one out using a radialGradient

var radialGradient = vis.append("defs")
    .append("radialGradient")
    .attr("id", "radialGradient")
    .attr("cx", "0%")
    .attr("cy", "0%")
    .attr("r", "50%")
    .attr("fx", "0%")
    .attr("fy", "0%")
    .attr("spreadMethod", "pad")
    .attr("gradientUnits", "userSpaceOnUse");

Here is the working example: https://jsfiddle.net/kyleopperman/aacgzxed/1/

Upvotes: 1

Related Questions