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>

编辑：使用扩展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>

如何扭曲d3＆＃34;翻译＆＃34;成功能？

1 个答案: