chart = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);
const agedata = viewof agedata.value;
const x = d3.scaleLinear()
.domain([0, d3.max(agedata, d => d.value)])
.rangeRound([margin.left, width - margin.right]);
const y = d3.scaleBand()
.domain(agedata.map(d => d.name))
.rangeRound([margin.top, margin.top + 20 * data.names.length]);
let bar = svg.append("g")
.attr("fill", "steelblue")
.selectAll("rect")
.data(agedata, d => d.name)
.join("rect")
.style("mix-blend-mode", "multiply")
.attr("x", x(0))
.attr("y", d => y(d.name))
.attr("width", d => x(d.value) - x(0))
.attr("height", y.bandwidth() - 1);
const gx = svg.append("g")
.call(xAxis, x);
const gy = svg.append("g")
.call(yAxis, y);
return Object.assign(svg.node(), {
update(agedata) {
const t = svg.transition().duration(750);
gx.transition(t)
.call(xAxis, x.domain([0, d3.max(agedata, d => d.value)]));
gy.transition(t)
.call(yAxis, y.domain(agedata.map(d => d.name)));
bar = bar
.data(agedata, d => d.name)
.call(bar => bar.transition(t)
.attr("width", d => x(d.value) - x(0))
.attr("y", d => y(d.name)));
}
});
}