首页 > 解决方案 > 可切换的 D3 和弦图

问题描述

我想在 D3.js 中修改以下和弦图,

https://observablehq.com/@d3/chord-dependency-diagram?collection=@d3/d3-chord

单击类别将最小化类别并删除功能区

标签: javascriptd3.jschord-diagramchord

解决方案


完毕。按照下面的链接查看演示。本质上,您只需要创建一个更新标签、弦和弧的更新函数,然后向弧添加一个单击事件侦听器,该事件侦听器会修改矩阵数据并调用更新函数。添加动画有点棘手,因为您需要在单击弧之前和之后在两个状态之间补间矩阵数据。剔除数据,200行左右还是可以搞定的。

const update = () => {
    update_chord();
    update_arcs();
    update_ribbons();
};

JSFiddle 演示


推荐阅读