Question

我试图移动具有已定义的最终状态的对象 - 需要帮助以提供最终状态...当我将结束状态x位置提供为attr时，它确实有效（＆＃34; cx＆＃34;，function（d），i）{return（i * 100）+25;}）。我希望能够在一个数组中定义最终状态的x和y位置。例如xposition = [50,100,200,300,550]; yposition = [100,200,300,400,500]或来自json（x，y）Feed

我该怎么做？感谢

let xSquared = Power(operand1: Parameter(), operand2: Constant(constant: 2))

Answer 1

目前，由于它们都是数组，因此您只需要通过xposition中的索引引用yposition和function(d, i)：

circles.transition()
    .attr("cx",function(d,i){return xposition[i]})
    .attr("cy",function(d,i){return yposition[i]})
    .attr("r",function(d){return 2*d;})
    .delay(1000)
    .duration(1000)
    .ease("cubic");

这是小提琴：https://jsfiddle.net/gerardofurtado/m8hnas3e/

但是让我告诉你，这不是处理数据的“D3方式”。 D3为您提供了强大的工具集来处理基于数据的元素，您真的应该使用它。如果您有一个JSON，就像您在问题中所说的那样，您可以简单地绑定数据并执行您想要的每个转换和操作。

Answer 2

例如：

attr运算符构建在attrTween运算符之上。 attr运算符使用的补间函数取决于结束值是函数还是常量。

如果结束值是函数：

function tween(d, i, a) {
  return d3.interpolate(a, String(value.call(this, d, i)));
}

否则，如果结束值是常数：

function tween(d, i, a) {
  return d3.interpolate(a, String(value));
}

d3js中的转换功能

2 个答案: