添加圖像到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);