Published
Edited
Sep 5, 2022
dom = chart.node()
chart.options()
{
// 创建自定义图例
function createLegend(container, plot) {
container.style.display = "flex";
let group = container.querySelector(".legend-container");
if (group) group.remove();
group = document.createElement("div");
group.className = "legend-container";
dom.appendChild(group);
// 这里的数据最好是拿到 colorScale 获取
pieData.forEach((d) => {
const div = document.createElement("div");
div.innerHTML = d.name;
// 自定义交互
div.addEventListener("mouseenter", () => {
plot.emit(LEGEND_EVENT, { seriesName: d.name });
});
div.addEventListener("mouseleave", () => {
plot.emit(LEGEND_EVENT, { seriesName: null });
});
group.appendChild(div);
});
return group;
}
const { canvas } = chart.context();
canvas.ready.then(() => {
// 确保 dom 已经加载到文档之后，就存在这个问题了：这里怎么可以拿到 .plot 元素已经加载完毕的生命周期，而不是通过 setTimeout。
setTimeout(() => {
createLegend(dom, canvas.document.querySelector(".plot"));
}, 0);
});
return "Custom Legend";
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
