d3をどのように「変換」して関数に変換するのですか？ D3で

Question

は、指定された位置にオブジェクトを移動させるために、通常で行われる：

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

私はこのように使用することができる関数（又はメソッド？）呼び出しにそれをワープすることができる方法：

g_x.move(x, y); 

Answer 1

D3プロトタイプを拡張する選択肢が1つあります。誰かがすぐにこれらの行に沿って回答を投稿することを確信しています。

は任意のオプションの引数と一緒にこの選択を渡して、一度だけ指定された関数を呼び出します：

しかし、私は、最も簡単な解決策はcallを、使用していることを信じています。例えば、我々が使用することができ、100,100によって選択を翻訳するための

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

：

ここ

selection.call(move, 100, 100); 

がある

だから、あなたのケースでは、のは、moveをという名前の関数を作成してみましょうデモの場合、元の円は10,10で、1秒後に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：拡張D3プロトタイプの非常に単純な、粗例を使用：

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>