actualmente tengo un problema, estoy usando D3 para graficar datos, el problema es que uso bordes redondeados y cuando los valores son pequeños tengo un efecto 'oreja' en mi chart
codigo:
const rx = 30;
const ry = 30;
svg
.selectAll(".bar")
.data(data)
.enter()
.append("path")
.attr("class", "bar")
.attr("x", function (d) {
return x(d.key);
})
.attr("width", x.bandwidth())
.attr("y", function (d) {
return y(d.value);
})
.attr("height", function (d) {
return height - y(d.value);
})
.attr("fill", "#206BF3")
.attr(
"d",
(item) => `
M${x(item.key)},${y(item.value) + ry}
a${rx},${ry} 0 0 1 ${rx},${-ry}
h${x.bandwidth() - 2 * rx}
a${rx},${ry} 0 0 1 ${rx},${ry}
v${height - y(item.value) - ry}
h${-x.bandwidth()}Z
`
)
He visto varias preguntas y respuestas, pero no logro solucionar mi problema