d3 / topojson区域映射中的工具提示不起作用

Question

我有一个Choropleth map，大多数情况下工具提示都在起作用，但是现在中心状态正显示工具提示...表面上，它们甚至根本没有运行mouseout回调函数（在控制台上进行了测试。 log命令）。

[起初，我使用d3-tip，但没有用，这是第一次尝试，所以我想我可能做错了，因此我选择实现一个在[C0 ]和display: none，当它仍然不起作用时，我输入了console.log命令，以查看回调函数是否正在运行，而没有运行。这主要是堪萨斯州的问题，但周边州的一些县也有问题。而且我知道这与数据集无关，因为从相同数据集中提取的display: block正常工作。

这是工具提示的CSS：

example

和JS代码：

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

Answer 1

问题是您正在将填充应用于状态网格。让我们将填充从

$(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);
    });
  });
});

更改为rgba(0,0,0,0)：