7、D3数据可视化：基础图表与层次数据处理

D3数据可视化：基础图表与层次数据处理

1. 为图表添加鼠标交互

在数据可视化中，为图表添加交互性可以让用户更直观地获取数据信息。这里我们将为图表添加鼠标跟踪功能，当鼠标移动到图表上时，会高亮显示数据点，显示特定年份的值，并添加一条垂直线以更清晰地展示数据。

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 ve