Javascript 如何使用d3.js为svg元素的顶部设置动画（如图中的gif）？
如果标题不对，我很抱歉，但我不确定它应该是什么。 我正在尝试设置一个标记的动画，该标记是Javascript 如何使用d3.js为svg元素的顶部设置动画（如图中的gif）？,javascript,d3.js,Javascript,D3.js,如果标题不对，我很抱歉，但我不确定它应该是什么。 我正在尝试设置一个标记的动画，该标记是“marker.svg”文件中包含的svg图像。我想复制与此gif完全相同的效果： 但在我的视觉感知中，似乎只有标记的顶部被激活 在我的代码中，主要问题是标记从其原点移动。这是我目前的结果： 我如何使其与gif的动画相匹配 多谢各位 <body> <script type="text/javascript"> const svg = d3.select("bod
“marker.svg” <body>
<script type="text/javascript">
const svg = d3.select("body").append("svg").attr("width",1000).attr("height",1000);
svg.append("circle").attr("r",5).attr("cx",253).attr("cy",102).style("stroke","#FF0000");
var widthMarker=50;
var img = svg.append("svg:image")
.attr("xlink:href", "marker.svg")
.attr("width", widthMarker)
.attr("height", widthMarker)
.attr("x", 228)
.attr("y",53)
.on('mouseover', function(){
d3.select(this).transition().ease("bounce").duration(500).attr("height",widthMarker+50);
})
.on('mouseout', function(){
d3.select(this).transition().ease("bounce").duration(500).attr("height",widthMarker);
})
</script>
</body>
const svg=d3.select（“body”）.append（“svg”）.attr（“width”，1000）.attr（“height”，1000）；
svg.append（“circle”）.attr（“r”，5）.attr（“cx”，253）.attr（“cy”，102）.style（“stroke”，#FF0000”）；
var=50；
var img=svg.append（“svg:image”）
.attr（“xlink:href”，“marker.svg”）
.attr（“宽度”，宽度标记）
.attr（“高度”，宽度标记）
.attr（“x”，228）
.attr（“y”，53）
.on（'mouseover'，function（）{
d3.选择（this）.transition（）.ease（“bounce”）.duration（500.attr（“高度”），widthMarker+50）；
})
.on（'mouseout'，function（）{
d3.选择（this）.transition（）.ease（“bounce”）.duration（500.attr（“height”），widthMarker）；
})
<body>
<script type="text/javascript">
const svg = d3.select("body").append("svg").attr("width", 1000).attr("height", 1000);
svg.append("circle").attr("r", 5).attr("cx", 253).attr("cy", 102).style("stroke", "#FF0000");
var widthMarker = 50;
var img = svg.append("svg:image")
.attr("xlink:href", "marker.svg")
.attr("width", widthMarker)
.attr("height", widthMarker)
.attr("x", 228)
.attr("y", 50)
.on('mouseover', function() {
d3.select(this)
.transition()
.ease("bounce")
.duration(500)
.attr("height", widthMarker + 50)
.attr("y", 17);
})
.on('mouseout', function() {
d3.select(this)
.transition()
.ease("bounce")
.duration(500)
.attr("height", widthMarker)
.attr("y", 50);
})
</script>
</body>
const svg=d3.select（“body”）.append（“svg”）.attr（“width”，1000）.attr（“height”，1000）；
svg.append（“circle”）.attr（“r”，5）.attr（“cx”，253）.attr（“cy”，102）.style（“stroke”，#FF0000”）；
var=50；
var img=svg.append（“svg:image”）
.attr（“xlink:href”，“marker.svg”）
.attr（“宽度”，宽度标记）
.attr（“高度”，宽度标记）
.attr（“x”，228）
.attr（“y”，50）
.on（'mouseover'，function（）{
d3.选择（本）
.transition（）
.轻松（“反弹”）
.持续时间（500）
.attr（“高度”，宽度标记+50）
.attr（“y”，17）；
})
.on（'mouseout'，function（）{
d3.选择（本）
.transition（）
.轻松（“反弹”）
.持续时间（500）
.attr（“高度”，宽度标记）
.attr（“y”，50岁）；
})
这是更新后的。我认为您需要将
y