7、基础图表与形状及层次数据可视化

咖啡JSON

于 2025-11-03 13:41:45 发布

阅读量19

点赞数

CC 4.0 BY-SA版权

分类专栏： D3.js数据可视化实战文章标签： D3 数据可视化鼠标交互

本文链接：https://blog.youkuaiyun.com/i1j2k/article/details/155013915

D3.js数据可视化实战专栏收录该内容

23 篇文章 ¥499.90

订阅专栏¥69.90

会员秒杀 ¥9.9 重磅福利

超级会员免费看

基础图表与形状及层次数据可视化

1. 为图表添加鼠标交互

在图表中添加鼠标交互功能，可突出显示数据点、显示特定年份的值，并添加垂直线以增强清晰度。实现步骤如下：
1. 创建元素 ：创建包含两个圆、两个文本元素和一条垂直线的组，并将其隐藏。

function addMouseTracker(xScale, yIndexedScale, yIncomeScale,
    adjustedIndexedData, unadjustedCleaned) {
    var focus = chart.append("g").attr("class", "focus").style("display", "none");
    focus.append("circle").attr("id", "indexCircle").attr("r", 4.5);
    focus.append("circle").attr("id", "incomeCircle").attr("r", 4.5);
    focus.append("text").attr("id", "indexText").attr("x", 9).attr("dy", ".35em");
    focus.append("text").attr("id", "incomeText").attr("x", 9).attr("dy", ".35em");
    var verticalLineP = d3.line()([[0,-10],[0,height+10]]);
    focus.append("path")