chart = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);
svg.append("defs")
.selectAll("linearGradient")
.data(data.filter(d => d.end !== null))
.join("linearGradient")
.attr("id", d => (d.gradientId = DOM.uid("gradient")).id)
.attr("gradientUnits", "userSpaceOnUse")
.attr("x1", d => x(d.start))
.attr("x2", d => x(d.end))
.call(g => g.append("stop").attr("stop-color", "currentColor"))
.call(g => g.append("stop").attr("offset", "100%").attr("stop-color", "#ccc"));
const line = svg.append("g")
.attr("stroke-width", 2)
.selectAll("line")
.data(data)
.join("line")
.attr("stroke", d => d.end === null ? "currentColor" : d.gradientId)
.attr("x1", d => x(d.start))
.attr("x2", d => x(d.end || x.domain()[1]))
.attr("y1", d => y(d.name) + 0.5)
.attr("y2", d => y(d.name) + 0.5);
svg.append("g")
.call(xAxis);
const label = svg.append("g")
.attr("font-family", "sans-serif")
.attr("font-size", 10)
.attr("text-anchor", "end")
.selectAll("text")
.data(data)
.join("text")
.attr("x", d => x(d.start) - 6)
.attr("y", d => y(d.name))
.attr("dy", "0.35em")
.attr("fill-opacity", d => d.end === null ? null : 0.6)
.text(d => d.name);
const dot = svg.append("g")
.attr("fill", "currentColor")
.selectAll("circle")
.data(data.filter(d => d.end !== null))
.join("circle")
.attr("cx", d => x(d.end))
.attr("cy", d => y(d.name) + 0.5)
.attr("r", 2);
return Object.assign(svg.node(), {
update(data) {
const t = svg.transition().duration(750);
y.domain(data.map(d => d.name));
line.data(data, d => d.name).transition(t)
.delay(d => y(d.name))
.attr("y1", d => y(d.name))
.attr("y2", d => y(d.name));
label.data(data, d => d.name).transition(t)
.delay(d => y(d.name))
.attr("y", d => y(d.name));
dot.data(data, d => d.name).transition(t)
.delay(d => y(d.name))
.attr("cy", d => y(d.name));
}
});
}