6、利用D3实现交互式图表与平滑过渡

利用D3实现交互式图表与平滑过渡

1. 用鼠标探索图表

对于从事数据分析工作的人来说，通过鼠标与图表进行交互是一种非常实用的功能。只需将鼠标指向图表上的某个点，就能获取该数据点的额外信息。

下面是一个简单的示例，展示了如何在图表中实时显示鼠标指针的像素坐标：

function coordsPixels( selector ) {
    var txt = d3.select( selector ).append( "text" );             
    var svg = d3.select( selector ).attr( "cursor", "crosshair" ) 
        .on( "mousemove", function() {
            var pt = d3.mouse( svg.node() );                      
            txt.attr( "x", 18+pt[0] ).attr( "y", 6+pt[1] )        
                .text( "" + pt[0] + "," + pt[1] );
        } );
}

上述代码的具体步骤如下：
1. 创建一个 <text> 元素用于显示坐标，要确保在事件回调之外创建，避免每次鼠标移动都创建新元素。
2. 修改鼠标悬停在 <svg> 元素上时的光标形状，这一步并非必需，但能增强交互