Hinzugefügt Bild zu DOM-Element in d3, aber jetzt wird es nicht Übergang

Question

Ich versuche, ein Element mit einem angehängten Bild zum Übergang mit der d3.js-Bibliothek zu bekommen; Ich hatte dies erfolgreich erreicht, indem ich einfach einen einfachen Kreis benutzte, der schön um den Bildschirm herumging, aber jetzt, wo ich ein png hinzugefügt habe, passiert der Übergang nicht - das png erscheint jedoch, wenn die Seite aktualisiert wird Es war vorher! Mein Code ist unten .. Ihre Hilfe wird geschätzt!

<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

Die Attribute, die Sie in Ihrem Code (cx und cy) ändern sind auf Kreise, die durch die x- und y-Koordinaten ihres Zentrums (cx und cy) plus dem Radius beschrieben werden (r). Deshalb hat dein Kreisbeispiel funktioniert.

Aber Bilder werden durch ihre Breite, Höhe und die x- und y-Koordinaten der oberen linken Ecke der Box beschrieben (mit den Attributen x und y, wie unten gezeigt).

Verschiedene Svg-Elemente haben unterschiedliche Attribute, die ihre Dimensionen und ihre Position auf der Seite beschreiben. Sie müssen also die verschiedenen Attribute jedes Elementtyps kennen, möglicherweise unter Verwendung einer Referenz wie https://developer.mozilla.org/en-US/docs/Web/SVG/Element. Dann können Sie Ihr SVG-Element mithilfe von Transition wie in Ihrem Code animieren und den Wert des entsprechenden Attributs ändern.

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