Wie verzerren d3 "übersetzen" in eine Funktion?

Question

In d3, um ein Objekt zu einer bestimmten Position zu bewegen, wird es in der Regel mit getan: (oder Methode)

g_x.attr("transform", "translate(" + x + "," + y + ")"); 

Wie kann ich es in eine Funktion verziehen nennen, die wie folgt verwendet werden kann:

Answer 1

Eine Option ist die Erweiterung von D3-Prototypen, ich bin mir sicher, dass jemand in Kürze eine Antwort in diese Richtung schreiben wird.

Ich glaube jedoch, dass die einfachste Lösung call verwendet, die:

Ruft die angegebene Funktion genau einmal, zusammen mit allen optionalen Argumenten in dieser Auswahl übergeben.

Also, in Ihrem Fall, lassen Sie uns eine Funktion move Namen erstellen:

function move(selection, x, y) { 
    selection.attr("transform", "translate(" + x + "," + y + ")"); 
}; 

Für eine Auswahl von 100,100, zum Beispiel zu übersetzen, können wir verwenden:

selection.call(move, 100, 100); 

Hier a Demo, der Kreis ist ursprünglich bei 10,10, und nach 1 Sekunde ist es übersetzt von 100,100:

var circle = d3.select("circle"); 
 
setTimeout(() => { 
 
    circle.call(move, 100, 100) 
 
}, 1000); 
 

 
function move(selection, x, y) { 
 
    selection.attr("transform", "translate(" + x + "," + y + ")"); 
 
};

<script src="https://d3js.org/d3.v4.min.js"></script> 
 
<svg> 
 
    <circle cx="20" cy="20" r="8" fill="teal"></circle> 
 
</svg>

EDIT:

var circle = d3.select("circle"); 
 

 
setTimeout(() => { 
 
    circle.move(100, 100) 
 
}, 1000); 
 

 
d3.selection.prototype.move = function(x, y) { 
 
    this.attr("transform", "translate(" + x + "," + y + ")"); 
 
    return this; 
 
};

<script src="https://d3js.org/d3.v4.min.js"></script> 
 
<svg> 
 
    <circle cx="20" cy="20" r="8" fill="teal"></circle> 
 
</svg>