d3.js svg 图像：从矩形中心缩放

Question

我正在使用 d3 来填充一个笛卡尔平面，其中svg:image包含分布在不同坐标上的一堆元素。

我想补充mouserover和mouseout该放大图像鼠标悬停在和减轻其他人的不透明度逻辑。我在鼠标悬停时过滤我的选择，只选择所需的元素，一切都很好，除了我的缩放逻辑似乎没有得到预期的效果。图像向下和向右扩展，而不是从对角中心向外扩展。

这是我尝试过的：

1. transform: scale(1.5) 扩大，但也完全改变了图像的位置
2. transform: translate(-(width/2), -(height/2)) 与 scale 相结合，它的作用相同，但起始位置不同
3. 将 x 和 y 坐标更改为针对半宽和半高调整的坐标，具有相同的效果。

text-anchor我可以设置一个“锚点”来缩放的图像元素是否没有等价物？我不确定 html svg 的说法是什么，但我想我在想一些类似于许多矢量编辑器的锚点的东西。

当前方法，鼠标悬停处理程序：

  function fade(dir){
    return function(d){
      var others = svg.selectAll("image.movie_cover")
        .filter(function(g,i){
          return g != d
        })
        .transition().duration(800)
        .style("opacity",.3);

      var single = svg.selectAll("image.movie_cover")
        .filter(function(g,i){
          return g === d;
        })
        .transition().duration(900)
        .attr("transform", "translate(-40,-40) scale(1.4)")

        var title = keys[coords.indexOf(d)];
        var url = "/static/eshk/"+hash+"_images/" + title  + ".jpg";

        tt.transition()        
                .duration(200)      
                .style("opacity", .9);      
        tt.html(title)  
              .style("left", (d3.event.pageX) + "px")     
              .style("top", (d3.event.pageY - 28) + "px"); 
    }
 }

使用这种方法，尽管图像大小相同，但移动的距离不一致。

Answer 1

设置：200、200 处的 50 x 50 框。它需要过渡到 100 x 100。它更大、更宽 50，因此需要前后移动 25，例如 175、175。用函数替换硬编码值查找鼠标悬停时的当前宽度以计算精确值。

d3.select('svg').append('rect');
rect = d3.select('rect');
rect.attr({
    height: 50,
    width: 50,
    x: 200,
    y: 200,
    color: 'steelblue'
})
.transition()
.attr({
    width: 100,
    height: 100,
    x: 175,
    y: 175
});