javascript - 如何将 d3 "translate"变形为一个函数？

Question

在d3中，要将对象移动到指定位置，通常是这样完成的:

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

我怎样才能将它转换成函数(或方法？)调用，可以像这样使用:

g_x.move(x, y);

Answer 1

一个选项是扩展 D3 原型(prototype)，我相信很快就会有人按照这些思路发布答案。

但是，我认为最简单的解决方案是使用 call ，其中:

Invokes the specified function exactly once, passing in this selection along with any optional arguments.

因此，在您的情况下，让我们创建一个名为 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>

编辑:使用一个非常简单粗暴的扩展 D3 原型(prototype)示例:

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>