javascript - d3.js svg 图像 : scale from center of rectangle

Question

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

我想添加 mouserover 和 mouseout 逻辑来缩放鼠标悬停的图像并减轻其他图像的不透明度。我在鼠标悬停时过滤我的选择以仅选择所需的元素并且一切正常，除了我的缩放逻辑似乎没有达到预期的效果。图像向下和向右扩展，而不是从对 Angular 线中心向外扩展。

这是我尝试过的:

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

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

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

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