{
const $svg = svg`<svg width=${width} height=${100}></svg>`;
const data = [
...new Array(5).fill(null).map((v, i) =>
SelfControlledComponent(CircleComponent, {
cx: 30 + 42 * i,
cy: 30,
duration: 1000
})
),
{
append: "text",
x: 20,
y: 80,
text: "Click me or click/hover circles :)",
onClick: handleClick,
fill: "red",
duration: 500
}
];
function handleClick(_, current, index) {
const newDatum = data.map(d => {
if (d.append === "g") {
return d;
}
return { ...d, fill: current.fill === "red" ? "blue" : "red" };
});
render($svg, newDatum);
}
render($svg, data);
return $svg;
}