gpt4 book ai didi

animation - 在D3 js中将SVG坐标转换为页面坐标

转载 作者:行者123 更新时间:2023-12-04 19:56:19 24 4
gpt4 key购买 nike

我试图显示一个动画的工具提示,每1秒更改一次其位置,以显示多个图形。

var tooltip = d3.select("body")
.append("div")
.attr("id", "tooltip")
.attr("class", "tooltip");


由于这是一个div,因此笔译将无法使用此功能。因此,我正在尝试使用svg坐标进行这种翻译。

tooltip.html("Tooltip")
.style("left", x(currentTime) + "px")
.style("top", height + "px");


但是它将其作为页面坐标值。

如何将SVG坐标转换为页面坐标?
还是有其他方法可以将工具提示创建为SVG元素?

最佳答案

假设您的div工具提示绝对是位置,则您的“页面”坐标就是svg元素的位置加上事物在svg元素中的位置。

这是一个简单的示例(将鼠标悬停在圆圈上):



<!DOCTYPE html>
<html>

<head>
<script data-require="d3@4.0.0" data-semver="4.0.0" src="https://d3js.org/d3.v4.min.js"></script>
</head>

<body>
<svg
width="300" height="300"
style="left: 100px; top: 100px; position: absolute">
</svg>
<div id="tooltip" style="position: absolute; border: 1px solid black">
This is my tooltip
</div>
<script>
var json = [
{x: Math.random() * 300, y: Math.random() * 300},
{x: Math.random() * 300, y: Math.random() * 300},
{x: Math.random() * 300, y: Math.random() * 300}
];

var svg = d3.select('svg');

svg
.selectAll('circle')
.data(json)
.enter()
.append('circle')
.attr('cx', function(d){ return d.x })
.attr('cy', function(d){ return d.y })
.attr('r', 30)
.style('fill', 'red')
.on('mouseover', function(d){
var svgPos = svg.node().getBoundingClientRect();
d3.select('#tooltip')
.style('left', svgPos.left + d.x + 'px')
.style('top', svgPos.top + d.y + 'px');
})

</script>

</body>

</html>

关于animation - 在D3 js中将SVG坐标转换为页面坐标,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47356745/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com