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

debugcn 发表于 Dev

山姆

我试图将工具提示放在悬停在圆圈上的示例

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位置？

叫喊

您可以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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。