Transition hangup in d3.js

user_13914917 0
Viewed 39

I am having trouble with a simple animation in d3.js (fiddle)

My goal is to have the circle shift downward 50 pixels when the mouse hovers over the red square.

The circle transitions smoothly when my cursor hovers above the circle in the top right/left portion of the red square. However, when my cursor hovers inside of the circle or beneath the circle in the bottom left/right portions of the red square, the circle either stops moving at my cursor or does not move at all.

I assume this has something to do with my animation functions

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

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

I am new to d3.js and js in general. Any help would be greatly appreciated.

Here's a snippet:

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>

d3.js javascript
1 Answers

The problem is that the when you mouse over the circle, you are no longer mousing over the rectangle. The circle soaks up the mouse actions and nothing is left over for the rectangle.

So if you put the mouse over the circle, you either don't trigger the mouseover action, or you do, but immediately trigger the mouseout action, which puts the circle back where it came from.

The solution here would be to make the circle not intercept any mouse events, and we can do that with:

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

As seen below:

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>

user_71060860
Related