如何将鼠标悬停在一个图表上以在D3.js中的所有图表上显示垂直线和工具提示？

var svg = d3.select("body")
            .append("svg")
            .attr("width", width)
            .attr("height", height);

var chart = svg.append("g")
              .attr("class", "chart")
              .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

svg.append("line")
   .attr("class", "vertical-line")
   .style("stroke", "black")
   .style("stroke-width", 1)
   .style("stroke-dasharray", "5,5")
   .style("opacity", 0);

var tooltip = d3.select("body")
                .append("div")
                .attr("class", "tooltip")
                .style("opacity", 0);

svg.on("mousemove", function(event) {
    var mouseX = d3.pointer(event)[0];
    
    // 更新垂直线的位置
    svg.select(".vertical-line")
       .attr("x1", mouseX)
       .attr("x2", mouseX)
       .style("opacity", 1);
    
    // 更新工具提示的位置
    tooltip.style("left", (event.pageX + 10) + "px")
           .style("top", (event.pageY - 10) + "px");
    
    // 显示工具提示
    tooltip.style("opacity", 1);
});

svg.on("mouseout", function() {
    // 隐藏垂直线和工具提示
    svg.select(".vertical-line")
       .style("opacity", 0);
    tooltip.style("opacity", 0);
});