d3/topojson choropleth 地图中的工具提示不起作用

我有一个Choropleth 地图，其中工具提示对大部分内容都有效，但是中央状态现在显示工具提示……实际上，它们甚至根本没有运行 mouseout 回调函数（使用 console.log 命令进行测试） .

起初我用D3尖，这是行不通的，这是第一次尝试，所以我想我可能会做错事，所以我选择来实现标准的div之间切换display: none，并display: block当它仍然无法正常工作，我输入了一个 console.log 命令来查看回调函数是否正在运行，但事实并非如此。这主要是堪萨斯州的问题，但周边各州的一些县也有问题。而且我知道这不是数据集的问题，因为从同一数据集提取的示例工作正常。

这是工具提示的 css：

#tooltip{
  display: none;
  background-color: rgba(32,32,32,1);
  position: absolute;
  border-radius: 10px;
  padding: 10px;
  width: 200px;
  height: 40px;
  color: white
}

和JS代码：

$(function(){
  //svg setup
  const svgPadding = 60;
  const svgWidth = 1000;
  const svgHeight = 600;

  var svg = d3.select('body')
  .append('svg')
  .attr('width', svgWidth)
  .attr('height', svgHeight)
  .attr('id', 'map');

  function createChart(topData, eduData){
    //scales
    var colorScale = d3.scaleSequential(d3.interpolateBlues);
    var unitScale = d3.scaleLinear()
    .domain(d3.extent(eduData.map(e => e.bachelorsOrHigher)))
    .range([0,1])

    //map
    var path = d3.geoPath();
    svg.selectAll('.county')
    .data(topojson.feature(topData, topData.objects.counties).features)
    .enter()
    .append('path')
    .attr('class', 'county')
    .attr('d', path)
    .attr('data-fips', d=>d.id)
    .attr('eduIndex', d => eduData.map(e => e.fips).indexOf(d.id))
    .attr('data-education', function(){
      var index = d3.select(this).attr('eduIndex');
      if (index == -1)return 0;
      return  eduData[
        d3.select(this).
        attr('eduIndex')
      ]
        .bachelorsOrHigher
    })
    .attr('fill', function(){
      var value = d3.select(this).attr('data-education');
      return colorScale(unitScale(value));
    })
    .attr('stroke', function(){
      return d3.select(this).attr('fill');
    })
    .on('mouseover', function(d){
      var index = d3.select(this).attr('eduIndex');
      var education = d3.select(this).attr('data-education');
      var county = index == -1 ? 'unknown' : eduData[index].area_name;
      console.log(county)
      var tooltip = d3.select('#tooltip')
      .style('left', d3.event.pageX + 10 + 'px')
      .style('top', d3.event.pageY + 10 + 'px')
      .style('display', 'block')
      .attr('data-education', education)
      .html(`${county}: ${education}`)
    })
    .on('mouseout', ()=>d3.select('#tooltip').style('display', 'none'));

    svg.append('path')
    .datum(topojson.mesh(topData, topData.objects.states, (a,b)=>a.id!=b.id))
    .attr('d', path)
    .attr('fill', 'rgba(0,0,0,0)')
    .attr('stroke', 'black')
    .attr('stroke-width', 0.4)

    //legend scale
    const legendWidth = 0.5 * svgWidth;
    const legendHeight = 30;
    const numCells = 1000;
    const cellWidth = legendWidth/numCells;
    const legendUnitScale = d3.scaleLinear()
    .domain([0, legendWidth])
    .range([0,1]);

    //legend
    var legend = svg.append('svg')
    .attr('id', 'legend')
    .attr('width', legendWidth)
    .attr('height', legendHeight)
    .attr('x', 0.5 * svgWidth)
    .attr('y', 0)
    for (let i = 0; i < numCells; i++){
      legend.append('rect')
      .attr('x', i * cellWidth)
      .attr('width', cellWidth)
      .attr('height', legendHeight - 10)
      .attr('fill', colorScale(legendUnitScale(i*cellWidth)))
    }
  }

  //json requests
 d3.json('https://raw.githubusercontent.com/no-stack-dub-sack/testable-projects-fcc/master/src/data/choropleth_map/counties.json')
    .then(function(topData){
    d3.json('https://raw.githubusercontent.com/no-stack-dub-sack/testable-projects-fcc/master/src/data/choropleth_map/for_user_education.json')
      .then(function(eduData){
      createChart(topData, eduData);
    });
  });
});