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）は、それらの中心（CXおよびCY）のxおよびy座標プラス半径によって記述される円に適用可能です（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);