javascript - 删除鼠标移开时的 Mapbox 折线

Question

我正在编写一个函数，用于在 mouseover 和 mouseout 上添加和删除 Mapbox polyline。我的 mouseover 可以正常工作，但我似乎不知道如何在 mouseout 上访问它。

我不会在这里粘贴整个 JS 文件，因为它太大了。希望这已经足够了。首先绘制一条覆盖整个纬度/经度集的线，然后在鼠标悬停时绘制dataGroup。问题在于在 mouseout 上删除它们。

function showData (dataGroup) {
    dataGroupPath = [];
    for (var i = 0; i < dataGroup.length; i++)
    {
        dataGroupPath.push([dataGroup[i].latitude, dataGroup[i].longitude]);  
    }
    var hoverGroup = L.polyline(dataGroupPath, {color: '#000'}).addTo(map);
}

function showPath (dataGroup) {
    dataGroupPath = [];
    for (var i = 0; i < dataGroup.length; i++)
    {
        dataGroupPath.push([dataGroup[i].latitude, dataGroup[i].longitude]);  
    }
    var polyline = L.polyline(dataGroupPath, {color: "#03f"}).addTo(map);
    map.fitBounds(polyline.getBounds());
}

function removePath (dataGroup) {
    map.remove(hoverGroup);
}


// ***************************** //
//     WORKING WITH THE DATA     //
// ***************************** //

// Get the data
d3.csv("LatLonFile.csv", function(error, data) {
    data.forEach(function(d) {
        d.distance = +d.distance;
        d.elevation = +d.elevation;
        d.gradient = +d.gradient;
        d.latitude = +d.latitude;
        d.longitude = +d.longitude;
        line_points.push([d.latitude, d.longitude]);
    });

    // Scale the range of the entire chart
    x.domain(d3.extent(data, function(d) { return d.distance; }));
    y.domain([0, d3.max(data, function(d) { return d.elevation; })]);
    svg.call(zoomListener.x(x));

    // Split the data based on "group"
    var dataGroup = d3.nest()
        .key(function(d) {
            return d.group;
        })
        .entries(data);

    // Draw the array of line_points to the map and fit the bounds.
    var polyline = L.polyline(line_points, {color: "red"}).addTo(map);
    map.fitBounds(polyline.getBounds());

    // To remove white space between dataGroups, append the first element of one
    // dataGroup to the last element of the previous dataGroup.
    dataGroup.forEach(function(group, i) {
      if(i < dataGroup.length - 1) {
        group.values.push(dataGroup[i+1].values[0])
      }
    })

    // Add a line and an area for each dataGroup
    dataGroup.forEach(function(d, i){
        svg.append("path")
            .datum(d.values)
            .on("mouseover", showData)
            .on("mouseout", removePath)
            .on("dblclick", showPath)
            .attr("class", "area")
            .attr("d", area)
              .attr("clip-path", "url(#clip)")
            .style("fill", function(d) { return color(dataGroupGradient(d)); });
        });

Answer 1

折线的变量需要在函数外部声明，以便它们在范围内。

// Declare the groups used by the polylines created in the mouseover
// and double-click functions
var hoverGroup, zoomGroup;

// On mouseover of a group in a line graph, show the section of the 
// course on the map that corresponds
function showData (dataGroup) {
    dataGroupPath = [];
    for (var i = 0; i < dataGroup.length; i++)
    {
        dataGroupPath.push([dataGroup[i].latitude, dataGroup[i].longitude]);  
    }
    hoverGroup = L.polyline(dataGroupPath, {color: '#000'}).addTo(map);
}

// On double-click of a group in a line graph, zoom to the section of the
// map that corresponds
function zoomPath (dataGroup) {
    dataGroupPath = [];
    for (var i = 0; i < dataGroup.length; i++)
    {
        dataGroupPath.push([dataGroup[i].latitude, dataGroup[i].longitude]);  
    }
    zoomGroup = L.polyline(dataGroupPath, {color: "#03f"}).addTo(map);
    map.fitBounds(zoomGroup.getBounds().pad(1, 1));
}

function removeShowData (dataGroup) {
    map.removeLayer(hoverGroup);
}


// ***************************** //
//     WORKING WITH THE DATA     //
// ***************************** //

// Get the data
d3.csv("LatLon.csv", function(error, data) {
    data.forEach(function(d) {
        d.distance = +d.distance;
        d.elevation = +d.elevation;
        d.gradient = +d.gradient;
        d.latitude = +d.latitude;
        d.longitude = +d.longitude;
        line_points.push([d.latitude, d.longitude]);
    });

    // Scale the range of the entire chart
    x.domain(d3.extent(data, function(d) { return d.distance; }));
    y.domain([0, d3.max(data, function(d) { return d.elevation; })]);
    svg.call(zoomListener.x(x));

    // Split the data based on "group"
    var dataGroup = d3.nest()
        .key(function(d) {
            return d.group;
        })
        .entries(data);

    // Draw the array of line_points to the map and fit the bounds.
    var polyline = L.polyline(line_points, {color: "red"}).addTo(map);
    map.fitBounds(polyline.getBounds().pad(.1, .1));

    // To remove white space between dataGroups, append the first element of one
    // dataGroup to the last element of the previous dataGroup.
    dataGroup.forEach(function(group, i) {
      if(i < dataGroup.length - 1) {
        group.values.push(dataGroup[i+1].values[0])
      }
    })

    // Add a line and an area for each dataGroup
    dataGroup.forEach(function(d, i){
        svg.append("path")
            .datum(d.values)
            .on("mouseover", showData)
            .on("mouseout", removeShowData)
            .on("dblclick", zoomPath)
            .attr("class", "area")
            .attr("d", area)
              .attr("clip-path", "url(#clip)")
            .style("fill", function(d) { return color(dataGroupGradient(d)); });
        });