{
const context = DOM.context2d(width, height),
canvas = context.canvas;
const radius = Math.min(width, height) / 2,
outerRadius = radius - 10;
const arc = d3
.arc()
.outerRadius(outerRadius)
.innerRadius(innerRadius)
.context(context);
const circle = d3
.arc()
.startAngle(0)
.endAngle(2 * Math.PI)
.innerRadius(0)
.context(context);
const pie = d3.pie().padAngle(padAngle);
const arcs = pie(data);
context.translate(width / 2, height / 2);
arc.cornerRadius(cornerRadius);
context.globalAlpha = 0.5;
arcs.forEach(function(d, i) {
context.beginPath();
arc(d);
context.fillStyle = colors[i];
context.fill();
});
context.globalAlpha = 1;
context.beginPath();
arcs.forEach(arc);
context.strokeStyle = "#fff";
context.stroke();
if (!hide) {
context.lineWidth = .5;
arc.cornerRadius(0);
context.strokeStyle = "#000";
arcs.forEach(function(d, i) {
context.beginPath();
arc(d);
context.stroke();
});
context.beginPath();
arcs.forEach(d => {
const [x, y] = arc.centroid(d);
context.moveTo(x, y);
context.arc(x, y, 3, 0, 2 * Math.PI);
});
context.fillStyle = "#000";
context.fill();
const r =
Math.asin(
((outerRadius - cornerRadius) / (innerRadius + cornerRadius)) *
Math.sin(padAngle)
) / 2;
context.beginPath();
arcs.forEach(function(d) {
corner(d.startAngle + padAngle / 2, outerRadius - cornerRadius, +1);
corner(d.endAngle - padAngle / 2, outerRadius - cornerRadius, -1);
if (innerRadius > 0) {
corner(d.startAngle + r, innerRadius + cornerRadius, +1);
corner(d.endAngle - r, innerRadius + cornerRadius, -1);
}
});
context.strokeStyle = "#000";
context.stroke();
}
function corner(angle, radius, sign) {
context.save();
context.translate(
sign * cornerRadius * Math.cos(angle) +
Math.sqrt(radius * radius - cornerRadius * cornerRadius) *
Math.sin(angle),
sign * cornerRadius * Math.sin(angle) -
Math.sqrt(radius * radius - cornerRadius * cornerRadius) *
Math.cos(angle)
);
circle.outerRadius(cornerRadius - 1.5)();
context.restore();
}
return canvas;
}