添加图像到d3中的DOM元素，但现在它不会转换

Question

我想要使用d3.js库转换附加图像的元素;我已经成功实现了这一点，只是使用一个简单的圆形，很好地在屏幕上过渡，但现在我已经添加了一个PNG的过渡不会发生 - 虽然页面刷新时，PNG会出现，但它不会像它之前做过！我的代码在下面..你的帮助表示感谢！

<script> 

var data = [60, 120, 40, 710, 560, 850]; 
var data1 = data[0]; 

var canvas = d3.select("body").append("svg") 
     .attr("width", 2000) 
     .attr("height", 2000); 

     var imgs = canvas.append("image") 
      .attr("xlink:href", "AWT-Bus.png") 
      .attr("x", "60") 
      .attr("y", "60") 
      .attr("width", "20") 
      .attr("height", "20") 
      .attr("cx", 50) 
      .attr("cy", 200) 
      .attr("r", 20) 
      ; 

     imgs.transition() 
      .duration(data1*100) 
      .delay(2000) 
      .attr("cx", 200) 
      .transition() 
      .attr("cx", 50) 
      .attr("cy", 200) 
      .transition() 
      .attr("cx", 150) 
      .attr("cy", 300) 
      ; 

Answer 1

的属性，你在你的代码（Cx和Cy）适用正在发生变化，其由X和其中心的y坐标（Cx和Cy）加上半径绘制圆（R）。这就是你的圈子例子工作的原因。

但是通过图像的宽度，高度和盒子左上角的x和y坐标（使用如下所示的x和y属性）来描述图像。

不同的svg元素具有不同的属性，它们描述了它们的尺寸及其在页面上的位置，因此您需要了解每种元素具有的不同属性，可能使用的参考如https://developer.mozilla.org/en-US/docs/Web/SVG/Element。然后，您可以使用转换为您的svg元素设置动画效果，如在代码中完成的操作，并更改相应属性的值。

var canvas = d3.select("body").append("svg") 
    .attr("width", 2000) 
    .attr("height", 2000); 

var imgs = canvas.append("image") 
    .attr("xlink:href", "AWT-Bus.png") 
    .attr("x", "60") 
    .attr("y", "60") 
    .attr("width", "20") 
    .attr("height", "20"); 

imgs.transition() 
    .duration(2000) 
    .delay(1000) 
    .attr("x", 200) 
    .transition() 
    .attr("x", 50) 
    .attr("y", 200) 
    .transition() 
    .attr("x", 150) 
    .attr("y", 300);