时间戳

首页 > 解决方案 > d3.js 中的转换挂断

javascript - d3.js 中的转换挂断

问题描述

我在 d3.js 中遇到了一个简单的动画问题（小提琴）

我的目标是当鼠标悬停在红色方块上时，让圆圈向下移动 50 像素。

当我的光标悬停在红色方块右上角/左上部分的圆圈上方时，圆圈会平滑过渡。但是，当我的光标悬停在圆圈内或红色方块左下/右下方的圆圈下方时，圆圈要么停止在我的光标处移动，要么根本不移动。

我认为这与我的动画功能有关

function mouseOverLogo() {
cir.transition()
.duration(2000)
.attr('transform', 'translate(0, 50)');
}

function mouseOutLogo() {
cir.transition()
.duration(2000)
.attr('transform', 'translate(0, -50');
}

我一般是 d3.js 和 js 的新手。任何帮助将不胜感激。

这是一个片段：

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

const width = svg.attr('width');
const height = svg.attr('height');

const g = svg
.append('g')
    .attr('transform', `translate(${width / 2}, ${height / 2})`);

var cir_backboard = g
.append('rect')
    .attr('x', 50)
  .attr('y', 50)
  .attr('width', 60)
  .attr('height', 60)
  .attr('fill', 'red')
  .on('mouseover', mouseOverLogo)
  .on('mouseout', mouseOutLogo);

var cir = g
.append('circle')
    .attr('r', 30)
    .attr('cx', 80)
    .attr('cy', 80);

function mouseOverLogo() {
    cir.transition()
    .duration(2000)
    .attr('transform', 'translate(0, 50)');
}

function mouseOutLogo() {
    cir.transition()
    .duration(2000)
    .attr('transform', 'translate(0, -50');
}
<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="index.css" />
        <script src="https://d3js.org/d3.v6.js"></script>
    </head>
    <body>
        <div class=fourGrid>
            <div id=tl_grid>       
                <svg id=languages></svg>
            </div>
        </div>
    </body>
</html>

标签： javascriptd3.js

解决方案

问题是当您将鼠标悬停在圆圈上时，您不再将鼠标悬停在矩形上。圆圈吸收了鼠标动作，矩形没有任何剩余。

因此，如果您将鼠标放在圆圈上，您要么不触发 mouseover 动作，要么触发，但立即触发 mouseout 动作，这会将圆圈放回原来的位置。

这里的解决方案是让圆圈不拦截任何鼠标事件，我们可以这样做：

 cir.style("pointer-events","none");

如下图所示：

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

const width = svg.attr('width');
const height = svg.attr('height');

const g = svg
.append('g')
    .attr('transform', `translate(${width / 2}, ${height / 2})`);

var cir_backboard = g
.append('rect')
    .attr('x', 50)
  .attr('y', 50)
  .attr('width', 60)
  .attr('height', 60)
  .attr('fill', 'red')
  .on('mouseover', mouseOverLogo)
  .on('mouseout', mouseOutLogo);

var cir = g
.append('circle')
    .attr('r', 30)
    .attr('cx', 80)
    .attr('cy', 80)
    .style('pointer-events','none');

function mouseOverLogo() {
    cir.transition()
    .duration(2000)
    .attr('transform', 'translate(0, 50)');
}

function mouseOutLogo() {
    cir.transition()
    .duration(2000)
    .attr('transform', 'translate(0, -50');
}
<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="index.css" />
        <script src="https://d3js.org/d3.v6.js"></script>
    </head>
    <body>
        <div class=fourGrid>
            <div id=tl_grid>       
                <svg id=languages></svg>
            </div>
        </div>
    </body>
</html>

推荐阅读