d3 / d3-shape

Graphical primitives for visualization, such as lines and areas.
https://d3js.org/d3-shape
ISC License
2.47k stars 305 forks source link

Issue when using cornerRadius with padRadius and padAngle #157

Closed shotaars closed 4 years ago

shotaars commented 4 years ago

I'm using d3 version 5.9.2 and getting issue trying to add rounded corners to my chart. But the issue is appearing only in one case, when there is only two paths around. And there are two kind of errors appear (sometimes three and the right side path is disappearing). Screenshot (3) Screenshot (4) Screenshot (6)

So if there is only two paths around, issue appear. With other cases it works fine.

here is my code to create the arcs... var arc = d3.svg.arc() .startAngle(function (d) { return Math.max(0, Math.min(2 * Math.PI, x(d.x))); }) .endAngle(function (d) { return Math.max(0, Math.min(2 * Math.PI, x(d.x + d.dx))); }) .innerRadius(function (d) { if(d.depth == 0){0}else{ return Math.max(0, (y(d.y) + 8))}; }) .outerRadius(function (d) { return Math.max(0, y(d.y + d.dy)); }) .padAngle(0.08) .padRadius(100) .cornerRadius(4);

mbostock commented 4 years ago

You say you’re using d3 v5, but your code snippet references d3.svg.arc which hasn’t existed since d3 v3. Is that a copy-paste error? Or are you mixing old and new versions of D3?

mbostock commented 4 years ago

I’m not able to reproduce this error, so I’ll assume you’re using an old version of D3. If that’s not the case, please fork the notebook below to demonstrate the problem and I will investigate further.

https://observablehq.com/d/8ebc2030d93f72d8