d3.js 图片 x 和 y 属性

Question

我想将图像附加到 div#photo 并使用 d3.js 为其指定 x 和 y 属性，以便我可以创建从左侧滑入的过渡对于图像。但看起来 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

答案是"it depends"。您可以使用边距、填充、变换、left/right/top/bottom（在绝对定位的情况下）等

这是一个带边距的示例 (demo available)：

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

d3.js 图片 x 和 y 属性

d3.js image x and y attribute

javascript

image

d3.js

transition