d3.js：更新SVG元素的数据

Question

我目前正在构建一个世界地图，该地图在每个国家/地区都有鼠标悬停工具提示，显示属于该特定国家/地区的数据。这是导入和导出数据。当我单击按钮时，我希望工具提示（以及数据）从导入更新为导出数据。我正在使用此功能来构建地图：

// Function to draw world map
function drawWorldmap() {

  var tooltipOverviewWorldmap = d3.select("body").append("div").attr("class", "tooltipOverviewWorldmap");

  // Add sphere background for zoom/drag
  g.append("path")
    .attr("class", "sphere")
    .attr("d", pathGenerator({
      type: "Sphere"
    }))
    .on("click", function(d) {
      changeCountry("sphere");
    });

  // Add zoom functionality
  svgWorldmap
    .call(d3.zoom()
      .scaleExtent([1, 10])
      .on("zoom", function() {
        g.attr("transform", d3.event.transform);
        gCircle.attr("transform", d3.event.transform);
      }))
    .on("dblclick.zoom", null);

  // Load country and topojson data
  Promise.all([
    d3.tsv("https://unpkg.com/world-atlas@1/world/50m.tsv"),
    d3.json("https://unpkg.com/visionscarto-world-atlas@0.0.4/world/50m.json"),
    dataWorldmap
  ]).then(([tsvData, mapData, wmData]) => {

    console.log(wmData);

    let domainData = new Array();
    let rowById = [{}];
    tsvData.forEach(function(d) {
      rowById[d.iso_n3] = d;
      for (var j = 0; j < wmData.length; j++) {
        if (d.admin == wmData[j].Countries && wmData[j].Periods == year && wmData[j].SITC == SITC) {
          d.value = wmData[j].Value;
          domainData.push(wmData[j].Value)
        }
      }
    });

    let countries = topojson.feature(mapData, mapData.objects.countries);

    countries.features.forEach(function(d) {
      Object.assign(d.properties, rowById[d.id]);
    });

    var domainDataFiltered = domainData.filter(function(el) {
      return el.length && el == +el;
    });

    domainDataFiltered = domainDataFiltered.map(function(x) {
      return parseInt(x, 10);
    });

    // Draw world map
    g.selectAll("path").data(countries.features, function(d, i) {
        return d + i;
      })
      .enter().append("path")
      .attr("d", pathGenerator)
      .attr("class", function(d) {
        return "country " + d.properties.admin;
      })
      .attr("fill", function(d) {
        if (d.properties.value == ".") {
          return "whitesmoke"
        } else {
          return "lightgrey"
        }
      })
      .on("click", function(d) {
        changeCountry(d.properties.admin);
      })
      .on("mousemove", function(d) {
        tooltipOverviewWorldmap
          .style("left", d3.event.pageX + 10 + "px")
          .style("top", d3.event.pageY + 10 + "px")
          .style("display", "inline-block")
          .html(function() {
            if (d.properties.value == ".") {
              return d.properties.admin + ": no data available"
            } else if (Number.isNaN(parseFloat(d.properties.value))) {
              return d.properties.admin + ": no data available"
            } else {
              return d.properties.admin + ": " + numberFormat(d.properties.value);
            }
          });
      })
      .on("mouseout", function(d) {
        tooltipOverviewWorldmap.style("display", "none");
      });

  });

};

我尝试编写一个更新函数，但似乎什么也没做。这是我想出的：

function updateMap(selection) {
  // binding the data
  feature = g.selectAll(".path")
    .data(selection);

  // exit selection
  feature
    .exit()
    .remove();

  // enter selection
  feature
    .enter()
    .append("path")
    .attr("class", "path")
    .attr("d", pathGenerator);
}

运行updateMap();函数后，工具提示值保持不变。我该如何运作？