CODEWITHSUNDEEP
javascriptd3.jssvg
MattDionis
MattDionis

Reputation: 3616

Enlarge svg group element on mouseenter (D3)

I'm attempting to enlarge an svg group element on the mousesenter event with the following code. Instead this code enlarges the image within this group (causing a 'zoom' like effect). When I change images.on('mouseenter'... to nodeEneter.on('mouseenter... nothing happens. My full example can be found here: http://blockbuilder.org/MattDionis/7f5375d927698f508a01

var node = vis.selectAll('g.node')
      .data(nodes, function(d) {
        return d.id;
      });

    var nodeEnter = node.enter().append('svg:g')
      .attr('class', 'node')
      .attr('transform', function(d) {
        return "translate(" + d.x + "," + d.y + ")";
      })
      .attr('filter', 'url(#drop-shadow)')
      .on('click', click)
      .call(force.drag);

    var images = nodeEnter.append('svg:image')
      .attr('xlink:href',  function(d) {
        return d.img;
      })
      .attr('x', function(d) {
        return -25;
      })
      .attr('y', function(d) {
        return -25;
      })
      .attr('height', 50)
      .attr('width', 50)
      .attr('clip-path', 'url(#clip-circle)');

    var setEvents = images
      .on('mouseenter', function() {
        d3.select(this)
          .transition()
          .attr('x', function(d) {
            return -60;
          })
          .attr('y', function(d) {
            return -60;
          })
          .attr('height', 100)
          .attr('width', 100);
        })

Upvotes: 2

Views: 685

Answers (1)

Cyril Cherian
Cyril Cherian

Reputation: 32327

Some confusion on the question but as you said I expect the 'zoom-like' behavior here is how to achieve it...

To increase the size of the node on mouse over just add the scale to the node. Set the scale to 2 on mouseOver and on mouseOut set the scale back to 1.

 var nodeEnter = node.enter().append('svg:g')
      .attr('class', 'node')
      .attr('transform', function(d) {
        return "translate(" + d.x + "," + d.y + ")";
      })
      .attr('filter', 'url(#drop-shadow)')
      .on('mouseover', function(d){d.scale = 2;tick();})
      .on('mouseout', function(d){d.scale = 1;tick();})
      .on('click', click)
      .call(force.drag);

Then in side the function nodeTransform handle the scale

  function nodeTransform(d) {
    if (!d.scale)
      d.scale=1;
    d.x =  Math.max(maxNodeSize, Math.min(width - (d.imgwidth / 2 || 16), d.x));
    d.y =  Math.max(maxNodeSize, Math.min(height - (d.imgheight / 2 || 16), d.y));
    return "translate(" + d.x + "," + d.y + ")scale(" +d.scale+ ")";
  }

Working code here

Hope this helps!

Upvotes: 5

Related Questions