d3/topojson 分区统计图中的工具提示不起作用

Question

我有一个 Choropleth map 大部分工具提示都在工作，但中央各州现在显示工具提示...在表面上，它们甚至不是运行 mouseout 回调完全没有功能（使用 console.log 命令测试）。

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

这是工具提示的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);
    });
  });
});

Answer 1

问题是您正在对状态网格应用填充。让我们将填充从 rgba(0,0,0,0) 更改为 rgba(10,10,10,0.1):

现在应该清楚为什么鼠标交互在某些区域不起作用：网格被填充在它上面。尽管由于不透明度为 0 而看不到网格，它仍然会拦截鼠标事件。

网格仅用于表示边界：它是 geojson lineStrings 的集合（也请参阅）。网格不是用来填充的，它应该只有一个笔画。

如果将网格填充更改为 none，或将网格的指针事件更改为 none，则地图将按预期工作。

d3/topojson 分区统计图中的工具提示不起作用

Tooltip in d3/topojson choropleth map not working

tooltip

d3.js

topojson

choropleth