chart = {
const svg = d3.select(DOM.svg(width, height));
let bars = svg.append("g").attr("transform", "translate(0, 0)");
createTooltip();
let categories = bars.selectAll(".bar")
.data(stackedData)
.enter()
.append("g")
.attr("class", "day")
.attr("fill", (d,i)=>colorPalette(i));
categories
.selectAll("rect")
.data(function(d) { return d; })
.enter()
.append("rect")
.attr("x", (d, i) => x(i))
.attr("y", d => {
return d[1] !== d[0] ? y(d[1]) : 0;
})
.attr("rx", "3")
.attr("ry", "3")
.attr("width", x.bandwidth())
.attr("height", d => {
return d[1] !== d[0] ? y(d[0]) - y(d[1]) : 0;
})
.on("mouseenter", (d, i, nodes) => {
let tooltip = d3.select("#tooltip");
tooltip.style("opacity", 1);
let keys = Object.keys(data[0]);
let legend = keys.map((k,i) => {
let color = colorPalette(i);
return `
<div style="margin-top:7px;margin-bottom:7px;">
<div style="border-radius:8px;display:inline;margin-top:2px;width:13px;height:13px;position:absolute;background:${color};"></div>
<div style="margin-left:22px;font-size:15px;">${k}: ${d.data[k]}</div>
</div>
`
}).reverse().join("\n");
d3.select("#tooltip-text").html(`<div>` + legend + `</div>`);
let barPos = nodes[i].getBoundingClientRect();
let tooltipWidth = tooltip.node().getBoundingClientRect().width;
tooltip
.style("left", ((barPos.x + (barPos.width / 2)) - (tooltipWidth / 2)) + "px")
.style("top", (d3.event.pageY - 160) + "px");
})
.on("mouseleave", () => {
console.log("LEAVE");
d3.select("#tooltip").style("opacity", 0);
});
return svg.node();
}