radialStackedBarChart = {
const style = `
style {
visibility: hidden;
}
.tooltip {
font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
background: ${jaune};
border-radius: .1rem;
color: ${noir};
display: block;
font-size: 11px;
max-width: 320px;
padding: .2rem .4rem;
position: absolute;
text-overflow: ellipsis;
white-space: pre;
z-index: 300;
visibility: hidden;
}
`;
d3.select("body")
.append("style")
.html(style);
const svg = d3.select(DOM.svg(width, height))
.attr("viewBox", `${-width / 2} ${-height / 2} ${width} ${height}`)
.style("width", "100%")
.style("height", "auto")
.style("font", "10px sans-serif");
svg.append("g")
.selectAll("g")
.data(d3.stack().keys(dataGraphique.columns)(dataGraphique))
.join("g")
.attr("fill", d => z(d.key))
.selectAll("path")
.data(d => d)
.join("path")
.attr("d", arc)
.on("mouseover", function(event, d) {
let text = "Total en "+d.data.Annee+": "+d.data.Total+"\n"+" - Femmes: "+d.data.Femmes+"\n"+" - Hommes: "+d.data.Hommes;
showToolTip(text, [event.pageX, event.pageY])
})
.on("mousemove", function(event) {
d3.select(".tooltip")
.style("top", event.pageY - 10 + "px")
.style("left", event.pageX + 10 + "px")
})
.on("mouseout", function() {
d3.select(".tooltip").style("visibility", "hidden")
});
svg.append("g")
.call(xAxis);
svg.append("g")
.call(yAxis);
svg.append("g")
.call(legend);
const tooltip = d3.select("body").append("div")
.attr("class", "tooltip")
.style("position", "absolute")
.style("visibility", "hidden")
return svg.node();
}