使用 D3.js 将鼠标悬停在圆形数据点上答案

【问题标题】：Mouse hovering over circle data point using D3.js使用 D3.js 将鼠标悬停在圆形数据点上
【发布时间】：2021-12-20 08:03:44
【问题描述】：

我正在尝试添加悬停效果但没有成功。悬停在数据点上时如何显示数据？

https://plnkr.co/edit/Va1Dw3hg2D5jPoNGKVWp?p=preview&preview

<!DOCTYPE html>

SVG { 字体：12px 无衬线；文本锚：中间； }

  rect {
    stroke: lightgray;
    stoke-width: 1px;
    fill: none;
  }

  .y.axis path {
    fill: none;
    stroke: none;
  }
</style>

d3.csv('data.csv', function (error, rows) { 变量数据 = [];

    rows.forEach(function (d) {
      var x = d[''];
      delete d[''];
      for (prop in d) {
        var y = prop,
          value = d[prop];
        data.push({
          x: x,
          y: y,
          value: +value,
        });
      }
    });

    var margin = {
        top: 25,
        right: 80,
        bottom: 25,
        left: 25,
      },
      width = 500 - margin.left - margin.right,
      height = 500 - margin.top - margin.bottom,
      domain = d3
        .set(
          data.map(function (d) {
            return d.x;
          })
        )
        .values(),
      num = Math.sqrt(data.length),
      color = d3.scale
        .linear()
        .domain([-1, 0, 1])
        .range(['#B22222', '#fff', '#000080']);

    var x = d3.scale.ordinal().rangePoints([0, width]).domain(domain),
      y = d3.scale.ordinal().rangePoints([0, height]).domain(domain),
      xSpace = x.range()[1] - x.range()[0],
      ySpace = y.range()[1] - y.range()[0];

    var svg = d3
      .select('body')
      .append('svg')
      .attr('width', width + margin.left + margin.right)
      .attr('height', height + margin.top + margin.bottom)
      .append('g')
      .attr(
        'transform',
        'translate(' + margin.left + ',' + margin.top + ')'
      );

    var cor = svg
      .selectAll('.cor')
      .data(data)
      .enter()
      .append('g')
      .attr('class', 'cor')
      .attr('transform', function (d) {
        return 'translate(' + x(d.x) + ',' + y(d.y) + ')';
      });

    cor
      .append('rect')
      .attr('width', xSpace)
      .attr('height', ySpace)
      .attr('x', -xSpace / 2)
      .attr('y', -ySpace / 2);

    cor
      .filter(function (d) {
        var ypos = domain.indexOf(d.y);
        var xpos = domain.indexOf(d.x);
        for (var i = ypos + 1; i < num; i++) {
          if (i === xpos) return false;
        }
        return true;
      })
      .append('text')
      .attr('y', 5)
      .text(function (d) {
        if (d.x === d.y) {
          return d.x;
        } else {
          return d.value.toFixed(2);
        }
      })
      .style('fill', function (d) {
        if (d.value === 1) {
          return '#000';
        } else {
          return color(d.value);
        }
      });

    cor
      .filter(function (d) {
        var ypos = domain.indexOf(d.y);
        var xpos = domain.indexOf(d.x);
        for (var i = ypos + 1; i < num; i++) {
          if (i === xpos) return true;
        }
        return false;
      })
      .append('circle')
      .attr('r', function (d) {
        return (width / (num * 2)) * (Math.abs(d.value) + 0.1);
      })
      .style('fill', function (d) {
        if (d.value === 1) {
          return '#000';
        } else {
          return color(d.value);
        }
      });

    var aS = d3.scale
      .linear()
      .range([-margin.top + 5, height + margin.bottom - 5])
      .domain([1, -1]);

    var yA = d3.svg.axis().orient('right').scale(aS).tickPadding(7);

    var aG = svg
      .append('g')
      .attr('class', 'y axis')
      .call(yA)
      .attr(
        'transform',
        'translate(' + (width + margin.right / 2) + ' ,0)'
      );

    var iR = d3.range(-1, 1.01, 0.01);
    var h = height / iR.length + 3;
    iR.forEach(function (d) {
      aG.append('rect')
        .style('fill', color(d))
        .style('stroke-width', 0)
        .style('stoke', 'none')
        .attr('height', h)
        .attr('width', 10)
        .attr('x', 0)
        .attr('y', aS(d));
    });
  });
</script>

【问题讨论】：

标签： javascript d3.js

【解决方案1】：

创建一个新的 div 并给它一些样式。还将不透明度设置为 0。

var popupDiv = d3
   .select("#root")
   .append("div")
   .attr("class", "tooltip")
   .style("opacity", 0);

接下来，您需要将mouseenter 和mouseout 添加到您想要的元素中

 d3.append("div") // Change this to your element(s)
   .on("mouseenter", function (d, i) {
      popupDiv.transition().duration(200).style("opacity", 0.9);
      popupDiv
        .html(i.Description) // Example of display a data item description
        .style("left", d.pageX + "px") // X offset can be added here
        .style("top", d.pageY + "px"); // Y offset can be added here
    })
   .on("mouseout", function (d, i) {
         popupDiv.transition().duration(200).style("opacity", 0);
    })

请记住，d 到 mouseenter 和 mouseout 函数的第一个参数是鼠标事件本身，用于找出鼠标的 x 和 y 位置。第二个参数i 是附加到元素的数据，如果您想将任何数据用于特定描述或颜色等。

这些是我在创建弹出窗口时使用的基本样式

div.tooltip {
  position: absolute;
  text-align: center;
  width: auto;
  height: auto;
  max-width: 200px;
  padding: 8px;
  font: 12px sans-serif;
  background: lightsteelblue;
  border: 0px;
  border-radius: 8px;
  pointer-events: none;
  z-index: 10;
}

【讨论】：