D3 add stroke to the side of a path only

user_9011748 0
Viewed 635

I'm creating a path that's following an arch along a donut chart. It's rendering 12 paths which make up my entire donut. I'm trying to figure out how to only have stroke along the left and right side of each path. One of my paths looks like this (the rest on this loop sit next to it).

<path stroke-width="0.4" fill="none" d="M-124.0972400982391,-124.09724009823911A175.50000000000003,175.50000000000003,0,0,1,45.422742415492394,-169.51998251373152L42.705142441915925,-159.37776133769628A165,165,0,0,0,-116.67261889578033,-116.67261889578035Z" stroke="#EAEDED"></path>

in d3 it looks like

const radius = Math.min(width, height) / 2;
  const graph = new Array(6).fill(1); // 6 equal sections

  const gridPie = d3
    .pie()
    .startAngle(startAngle)
    .endAngle(endAngle)
    .sort(null)
    .value(d => d);

  const arc = d3
    .arc()
    .innerRadius(radius * innerFactor)
    .outerRadius(radius * outerFactor);

  svg
    .append("g")
    .selectAll("path")
    .data(gridPie(graph))
    .join("path")
    .attr("stroke-width", 0.4)
    .attr("fill", "none")
    .attr("d", arc)
    .attr("stroke", "#EAEDED")
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
enter image description here

Here is the codesandbox to the project I am working on. The area in question can be found on line 84 of wheel.js file. https://codesandbox.io/s/pedantic-haze-rzpz2?fontsize=14&hidenavigation=1&theme=dark

d3.js svg javascript
1 Answers

I ended up solving this by removing the stroke from the path and instead appending lines to the ends of my arcs. In my case I needed every other line to be lighter so that's what the ternary is in the stroke. I used the data method to determine which would be light if it was a 0 or bold if it was a 1.

svg
.selectAll(".grid")
// border lines, 1 = dark border, 0 = light border
.data(gridPie([1, 0, 1, 0, 1, 0]))
.append("line")
.attr("x1", 0)
.attr("y1", 0)
.attr(
  "y2",
  d =>
    Math.sin(d.startAngle - Math.PI / 2) *
    (radius - (d.data === 1 ? 0 : 75.5))
)
.attr(
  "x2",
  d =>
    Math.cos(d.startAngle - Math.PI / 2) *
    (radius - (d.data === 1 ? 0 : 75.5))
)
.attr("stroke", d => (d.data === 0 ? "#C8C8C8" : "#000"))
.attr("stroke-width", "0.1");
user_90117480
Related