chart = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);
svg.append("line")
.attr("stroke-width", 2)
.attr("stroke", "red")
.attr("x1", x(eventData.year) + margin.left)
.attr("x2", x(eventData.year) + margin.left)
.attr("y1", margin.top - 10)
.attr("y2", height - margin.bottom);
data.forEach(d => d.color = d3.color(color(d.category)));
const g = svg.append("g")
.attr("transform", (d, i) => `translate(${margin.left} ${margin.top})`);
const groups = g
.selectAll("g")
.data(data)
.join("g")
.attr("class", "person");
const line = svg.append("line")
.attr("y1", margin.top - 10)
.attr("y2", height - margin.bottom)
.attr("stroke", "rgba(0,0,0,0)")
.style("pointer-events", "none");
groups.attr("transform", (d, i) => `translate(0 ${y(i)})`)
groups
.each(getRect)
.on("mouseover", function(d) {
d3.select(this)
.select("rect")
.style("opacity", 0.8);
d3.select(this)
.select("text")
.style("font-weight", "bold");
})
.on("mouseleave", function(d) {
d3.select(this)
.select("rect")
.style("opacity", 1);
d3.select(this)
.select("text")
.style("font-weight", "normal");
});
svg
.append("g")
.attr("transform", (d, i) => `translate(${margin.left} ${margin.top - 10})`)
.call(axisTop);
svg
.append("g")
.attr("transform", (d, i) => `translate(${margin.left} ${height-margin.bottom})`)
.call(axisBottom);
svg.on("mousemove", function(event) {
let [x, y] = d3.pointer(event);
console.log(x);
line
.attr("stroke", "rgba(0,0,0,0.2)")
.attr("transform", `translate(${x} 0)`);
});
return svg.node();
}