如何將d3「翻譯」成功能？

Question

在D3，以將對象移動到一個指定的位置，它通常與進行：（？或方法）

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

我怎樣才能彎曲成一個函數調用，可以像這樣使用：

g_x.move(x, y); 

Answer 1

一種選擇是擴展D3原型，我敢肯定有人會很快發佈一個答案。

但是，我認爲，最簡單的解決方案是使用call，其中：

調用指定的功能只出現一次，在本次評選經過任何可選參數一起。

所以，你的情況，讓我們創建一個名爲move功能：

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

對於由100,100轉換選擇，例如，我們可以使用：

selection.call(move, 100, 100); 

這裏是一個演示，這個圓圈最初是在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>