d3.js图像x和y属性

Question

我想将图像附加到div＃photo上，并使用d3.js为其赋予ax和ay属性，以便为该图像创建从左向右滑动的过渡。 但是看起来x和y属性不适用于图像元素吗？ 如何实现图像的过渡效果？

d3.select('#photo').append('img')
    .attr('src','images/1.jpg')
    .attr('width',500)                  
    .attr('height',300)
    .transition().attr('x', 100)
    .transition().attr('y', 200);

Answer 1

答案是“取决于”。 您可以使用页边距，填充，变换，左/右/上/下（在绝对定位的情况下）等。

这是一个带有边距的示例（ 演示可用 ）：

d3.select('#photo').append('img')
    .attr('src','http://google.com/images/srpr/logo11w.png')
    .attr('width',100)                  
    .attr('height',50)
    .transition()
    .duration(3000) // 3 seconds
        .style('margin-left', '200px')
        .style('margin-top', '200px');