25、数据可视化：从流量图到空间网络的探索

数据可视化：从流量图到空间网络的探索

1. 交互式和弦图的实现

在数据可视化中，和弦图是一种强大的工具，可用于展示国家之间的贸易流动等信息。以下是创建交互式和弦图的详细步骤及相关代码。

首先，设置 SVG 的基本样式：

svg {
  font: 11px Myriad Pro;
}
.chord {
    fill-opacity: .9;
}
path.chord {
    stroke: #000;
    stroke-width: .25px;
}

接着，为索引页面添加一个隐藏的圆形样式，当鼠标悬停在该圆形上时，隐藏应用了 fade CSS 类的路径：

#circle circle {
    fill: none;
    pointer-events: all;
}
#circle:hover path.fade {
    display: none;
}

然后，在 JavaScript 中实现可视化函数：

function visualize(imports, countries) {
    // ...
    // INTERACTIONS
    var formatValue = d3.format('$,f');
    // 添加一个不可见的圆形用于悬停事件以过滤和弦
    svg.insert('circle', ':