title: D3.js Arc Diagram - Tapered Ends
body: <p>I have an arc diagram that is based on this <a href="http://bl.ocks.org/mayblue9/dcc49ef6e3888f37f755177c4a248f2c" rel="nofollow noreferrer">blocks example</a>, and I'd like to taper the ends of the arc path so that they are hidden behind the circles (or at least aren't wider than the circles themselves).</p>
  <p>I have two thoughts and I'm not sure how feasible either of them are: a) modify <a href="https://github.com/d3/d3-shape/blob/main/src/arc.js" rel="nofollow noreferrer">d3.arc source code</a> so that the resultant svg path has tapered ends, or b) instead of using d3.arc to generate the path, create my own cubic bezier function that takes in the x and y points of the source and target nodes and outputs a a curve that tapers to maybe half of its full width? Both of which I've never done before and would be floundering a bit trying to do.</p>
  <p>Any tips, tricks, ideas, or general well wishes would be greatly appreciated.</p>
  <p><a href="https://i.stack.imgur.com/UUGHv.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/UUGHv.png" alt="enter image description here" /></a></p>