chart = {
const div = html`<div style="position:relative;">`;
const canvas = d3.select(div)
.selectAll("canvas")
.data(data)
.enter().append(() => DOM.context2d(width, step).canvas)
.style("position", "absolute")
.style("top", (d, i) => `${i * (step + 1) + margin.top}px`)
.each(horizon);
const svg = d3.select(div.appendChild(DOM.svg(width, height)))
.style("position", "relative")
.style("font", "10px sans-serif");
svg.append("g")
.call(xAxis);
svg.append("g")
.selectAll("text")
.data(data)
.join("text")
.attr("x", 4)
.attr("y", (d, i) => (i + 0.5) * (step + 1) + margin.top)
.attr("dy", "0.35em")
.text(d => d.key);
function horizon(d) {
const context = this.getContext("2d");
area.context(context);
for (let i = 0; i < overlap; ++i) {
context.save();
context.translate(0, (i + 1) * step);
context.beginPath();
area(d.values);
context.fillStyle = color(i);
context.fill();
context.restore();
}
}
return div;
}