javascript - D3-使用 d3.mouse 定位工具提示不起作用

Question

我正在尝试将鼠标悬停在圆圈上放置工具提示 Example

SVG 顶部有一个具有高度的 div，由于该 div，工具提示位置不正确。

示例代码。

.on('mousemove', function (d) {
  tooltip
    .html('No data to display.')
    .style('left', (d3.mouse(this)[0] + 20) + 'px')
    .style('top', d3.mouse(this)[1] + 'px')
  })

我仍然可以做这样的事情 .style('top', (d3.mouse(this)[1] + 100) + 'px')。这应该可行，因为我知道上面 div 的高度。

是否有可能在不使用 d3.mouse() 事件将上方元素的高度添加到 SVG 的情况下获取 Y 位置？

Answer 1

您可以使用d3.event相反:

.on('mousemove', function(d) {
  tooltip
    .html('No data to display.')
    .style('left', (d3.event.pageX + 10) + 'px')
    .style('top', (d3.event.pageY + 10) + 'px')
})

与div:

var a = [{
    cx: 40,
    cy: 60,
    r: 20
  },
  {
    cx: 120,
    cy: 80,
    r: 20
  },
  {
    cx: 200,
    cy: 60,
    r: 20
  }
];

const tooltip = d3.select('.tooltip')
var circle = d3.select("svg").selectAll("circle")
  .data(a)
  .on('mouseover', function() {
    tooltip
      .style('display', 'block')
    d3.select(this)
      .style('opacity', 1)
  })
  .on('mousemove', function(d) {
    tooltip
      .html('No data to display.')
      .style('left', (d3.event.pageX + 10) + 'px')
      .style('top', (d3.event.pageY + 10) + 'px')
  })
  .on('mouseleave', function() {
    tooltip
      .style('display', 'none')
  })

circle.exit().remove();

circle
  .attr('r', function(d) {
    return d.r
  })
  .attr('cy', function(d) {
    return d.cy
  })
  .attr('cx', function(d) {
    return d.cx
  })
  .style('fill', 'steelblue');

.tooltip {
  display: none;
  position: absolute;
  background-color: white;
  border: 1px solid #c1c1c1;
  border-radius: 5px;
  padding: 5px;
}

<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<div style="height: 100px;">Need this div</div>
<div class="tooltip"></div>
<svg width="720" height="120">
  <circle cx="40" cy="40" r="30" style="fill:steelblue;"></circle>
  <circle cx="80" cy="40" r="30" style="fill:steelblue;"></circle>
</svg>

没有div:

var a = [{
    cx: 40,
    cy: 60,
    r: 20
  },
  {
    cx: 120,
    cy: 80,
    r: 20
  },
  {
    cx: 200,
    cy: 60,
    r: 20
  }
];

const tooltip = d3.select('.tooltip')
var circle = d3.select("svg").selectAll("circle")
  .data(a)
  .on('mouseover', function() {
    tooltip
      .style('display', 'block')
    d3.select(this)
      .style('opacity', 1)
  })
  .on('mousemove', function(d) {
    tooltip
      .html('No data to display.')
      .style('left', (d3.event.pageX + 10) + 'px')
      .style('top', (d3.event.pageY + 10) + 'px')
  })
  .on('mouseleave', function() {
    tooltip
      .style('display', 'none')
  })

circle.exit().remove();

circle
  .attr('r', function(d) {
    return d.r
  })
  .attr('cy', function(d) {
    return d.cy
  })
  .attr('cx', function(d) {
    return d.cx
  })
  .style('fill', 'steelblue');

.tooltip {
  display: none;
  position: absolute;
  background-color: white;
  border: 1px solid #c1c1c1;
  border-radius: 5px;
  padding: 5px;
}

<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<div class="tooltip"></div>
<svg width="720" height="120">
  <circle cx="40" cy="40" r="30" style="fill:steelblue;"></circle>
  <circle cx="80" cy="40" r="30" style="fill:steelblue;"></circle>
</svg>

将 d3.mouse 与 div 一起使用:

.on('mousemove', function(d, a, b) {
  tooltip
    .html('No data to display.')
    .style('left', (d3.mouse(this)[0] + d3.select('svg').node().getBoundingClientRect().x + 10) + 'px')
    .style('top', (d3.mouse(this)[1] + d3.select('svg').node().getBoundingClientRect().y + 10) + 'px')
})

var a = [{
    cx: 40,
    cy: 60,
    r: 20
  },
  {
    cx: 120,
    cy: 80,
    r: 20
  },
  {
    cx: 200,
    cy: 60,
    r: 20
  }
];

const tooltip = d3.select('.tooltip')
var circle = d3.select("svg").selectAll("circle")
  .data(a)
  .on('mouseover', function() {
    tooltip
      .style('display', 'block')
    d3.select(this)
      .style('opacity', 1)
  })
  .on('mousemove', function(d, a, b) {
    tooltip
      .html('No data to display.')
      .style('left', (d3.mouse(this)[0] + d3.select('svg').node().getBoundingClientRect().x + 10) + 'px')
      .style('top', (d3.mouse(this)[1] + d3.select('svg').node().getBoundingClientRect().y + 10) + 'px')
  })
  .on('mouseleave', function() {
    tooltip
      .style('display', 'none')
  })

circle.exit().remove();

circle
  .attr('r', function(d) {
    return d.r
  })
  .attr('cy', function(d) {
    return d.cy
  })
  .attr('cx', function(d) {
    return d.cx
  })
  .style('fill', 'steelblue');

.tooltip {
  display: none;
  position: absolute;
  background-color: white;
  border: 1px solid #c1c1c1;
  border-radius: 5px;
  padding: 5px;
}

<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<div style="height: 100px;">Need this div</div>
<div class="tooltip"></div>
<svg width="720" height="120">
  <circle cx="40" cy="40" r="30" style="fill:steelblue;"></circle>
  <circle cx="80" cy="40" r="30" style="fill:steelblue;"></circle>
</svg>