dynamically angle linear gradient of svg

Question

I am dynamically adding linear gradients to each path within a circular diagram. I want each gradient to split each path down the middle. Like so:

image alt

I know I am able to rotate the gradient using gradientTransform but the rotation is different depending on the path's location within the circular diagram. How can I calculate the paths angle and draw the linear gradient accordingly? I have also tried manipulating the x1, x2, y1, and y2 coordinates of the linear gradient, but I'm not sure how to manipulate them accordingly.

let data = {
  name: "demo",
  children: [{
      "ID": "001",
      "Games": "PS2",
      "children": [{
        "ID": "001-1",
        "Games": "PS2",
      }]
    },
    {
      "ID": "002",
      "Games": "PS2",
      "children": [{
        "ID": "002-2",
        "Games": "PS2",
      }]
    },
    {
      "ID": "003",
      "Games": "PS2",
      "children": [{
        "ID": "003-1",
        "Games": "PS2",
      }]
    },
    {
      "ID": "004",
      "Games": "PS2",
      "children": [{
        "ID": "004-1",
        "Games": "PS2",
      }]
    },
    {
      "ID": "005",
      "Games": "PS2",
      "children": [{
        "ID": "005-5",
        "Games": "PS2",
      }]
    }
  ]
}


let width = 500;
let height = 500;
let radius = Math.min(width, height) / 2;
let color = d3.scaleOrdinal(d3.schemeCategory20b);

let g = d3.select('svg')
  .attr('width', width)
  .attr('height', height)
  .append('g')
  .attr('transform', 'translate(' + width / 2 + ',' + height / 2 + ')');

// Data strucure
let partition = d3.partition()
  .size([2 * Math.PI, radius]);

// Find data root
let root = d3.hierarchy(data)
  .sum(function(d) {
    return !d.children || d.children.length === 0 ? 2 : 0
  });

// Size arcs
partition(root);
let arc = d3.arc()
  .startAngle(function(d) {
    return d.x0
  })
  .endAngle(function(d) {
    return d.x1
  })
  .innerRadius(function(d) {
    return d.y0
  })
  .outerRadius(function(d) {
    return d.y1
  });

let svg = d3.select('svg')
// Put it all together
g.selectAll('path')
  .data(root.descendants())
  .enter().append('path')
  .attr("stroke-width", "5")
  .each((d, i, m) => {
    let lg = svg.append("defs")
      .append("linearGradient")
      .attr("id", `gradient${d.data.ID}`)
      .attr("gradientTransform", `rotate(${0})`)
      .attr("x1", "0%")
      .attr("x2", "100%")
      .attr("y1", "0%")
      .attr("y2", "0%")

    lg.append("stop")
      .attr("offset", "50%")
      .attr("stop-color", "#188F6B")

    lg.append("stop")
      .attr("offset", "50%")
      .attr("stop-color", "#3BDBAB")
  })
  .style("fill", (d) => {
    return `url(#gradient${d.data.ID})`
  })
  .attr("display", function(d) {
    return d.depth ? null : "none";
  })
  .attr("d", arc)
  .style('stroke', '#fff')

user_7897395 · Answer

This is my solution: I'm using only one gradient and 2 paths. The two one where the result is what you need. I'm grouping the 2 paths in a group with an id so that I can reuse it as many times as I need.

This will simplify your code a lot. Please observe that I'm moving the style and all the attributes to the group since they are the same. You don't need to repeat yourself.

Since the group is 1/5 of a circle this meant the spread angle of the group is 72º

I'm reusing the group 4 times rotating the use element 172 degs, 272 degs, 372 degs and 472 degs.

Since the drawing is centered around the point {x:0,y:0} you don't need to add a rotation center.

dynamically angle linear gradient of svg

1 Answers