chart = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);
const rect = svg.selectAll("g")
.data(series)
.join("g")
.attr("fill", ({key}) => color(key))
.selectAll("rect")
.data(d => d)
.join("rect")
.attr("x", d => x(d.data.time))
.attr("y", height - margin.bottom)
.attr("width", x.bandwidth() - 1)
.attr("height", 0)
function transitionStacked() {
rect.transition()
.duration(500)
.delay((d, i) => i * 20)
.attr("y", d => y(d[1]))
.attr("height", d => y(d[0]) - y(d[1]))
}
const l = lineLength(line(nodeCounts));
svg.append("path")
.attr("fill", "none")
.attr("stroke", "#424242")
.attr("stroke-width", 1.5)
.attr("stroke-dasharray", `0,${l}`)
.attr("d", line(nodeCounts))
.transition()
.duration(1000)
.ease(d3.easeLinear)
.attr("stroke-dasharray", `${l},${l}`);
svg.append("g")
.call(xAxis);
svg.append("g")
.call(yAxis);
svg.append("g")
.call(y2Axis);
function update() {
transitionStacked();
}
return Object.assign(svg.node(), {update});
}