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