如何将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>