chart = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);
svg.append("g")
.call(xAxis);
const g = svg.append("g")
.attr("text-anchor", "end")
.style("font", "10px sans-serif")
.selectAll("g")
.data(data)
.join("g")
.attr("transform", (d, i) => `translate(0,${y(d.name)})`);
g.append("line")
.attr("stroke", "#aaa")
.attr("x1", d => x(d3.min(keys, k => d[k])))
.attr("x2", d => x(d3.max(keys, k => d[k])));
g.append("g")
.selectAll("circle")
.data(d => d3.cross(keys, [d]))
.join("circle")
.attr("cx", ([k, d]) => x(d[k]))
.attr("fill", ([k]) => color(k))
.attr("r", 3.5);
g.append("text")
.attr("dy", "0.35em")
.attr("x", d => x(d3.min(keys, k => d[k])) - 6)
.text((d, i) => d.name);
return Object.assign(svg.node(), {
update(names) {
y.domain(names);
g.transition()
.delay((d, i) => i * 10)
.attr("transform", d => `translate(0,${y(d.name)})`)
}
});
}