javascript - 在 mouseenter (D3) 上放大 svg 组元素

Question

我尝试使用以下代码在 mousesenter 事件上放大 svg 组元素。相反，此代码会放大该组内的图像(导致类似“缩放”的效果)。当我将 images.on('mouseenter'... 更改为 nodeEneter.on('mouseenter...) 时，什么也没有发生。我的完整示例可以在这里找到: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);
        })

Answer 1

对这个问题有些困惑，但正如你所说我期望“类似缩放”的行为这里是如何实现它......>

要增加鼠标悬停时节点的大小，只需向节点添加比例即可。在 mouseOver 上将比例设置为 2，在 mouseOut 上将比例设置回 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);

然后在函数nodeTransform内部处理比例

  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+ ")";
  }

工作代码here

希望这有帮助!