chart_per_anim = {
const arcs = pie(data);
const svg = d3.create("svg")
.attr("viewBox", [-width / 2, -height / 2, width, height]);
let pieces = svg.append("g")
.attr("stroke", "white")
.selectAll("path")
.data(arcs)
.join("path")
.attr("fill", d => color(d.data.name))
.attr("class", d => "path_per_"+d.index)
.attr("d", arc_small)
.append("title")
.text(d => `${d.data.name}: ${d.data.value.toLocaleString()}`);
let labels = svg.append("g")
.attr("font-family", "sans-serif")
.attr("font-size", 12)
.attr("text-anchor", "middle")
.selectAll("text")
.data(arcs)
.join("text")
.attr("transform", d => `translate(${arcLabel_small.centroid(d)})`)
.call(text => text.append("tspan")
.attr("y", "-0.4em")
.attr("font-weight", "bold")
.text(d => d.data.name))
.call(text => text.filter(d => (d.endAngle - d.startAngle) > 0.25).append("tspan")
.attr("x", 0)
.attr("y", "0.7em")
.attr("fill-opacity", 0.7)
.text(d => d.data.value.toLocaleString()));
let mouse_pieces = svg.append("g")
.selectAll("path")
.data(arcs)
.join("path")
.attr("fill", "rgba(0,0,0,0)")
.attr("stroke", "none")
.attr("d", arc_small)
.on("mouseover", handleMouseOver)
.on("mouseout", handleMouseOut)
function handleMouseOver(d, i) {
let path = d3.select(".path_per_"+i.index)
path.raise()
let in_radius = Math.sqrt((radius*radius_multi)**2-radius**2)
let new_arc = d3.arc()
.innerRadius(in_radius)
.outerRadius(radius)
.cornerRadius(cornerRadius)
let new_arc2 = d3.arc()
.innerRadius(in_radius)
.outerRadius(radius*radius_multi)
.cornerRadius(cornerRadius)
path.interrupt().attr("d", new_arc)
.transition()
.duration(anim_path_duration)
.attr("d", new_arc2)
.attr("stroke","black");
}
function handleMouseOut(d, i) {
let path = d3.select(".path_per_"+i.index)
let new_arc = d3.arc()
.innerRadius(0)
.outerRadius(radius*radius_multi)
.cornerRadius(0)
let new_arc2 = d3.arc()
.innerRadius(0)
.outerRadius(radius)
.cornerRadius(0)
path.interrupt().attr("d", new_arc)
.transition()
.duration(anim_path_duration)
.attr("d", new_arc2)
.attr("stroke","white");
}
return svg.node();
}