Question

我正在将d3从v3.5.5转换为v5。它具有一段代码，可以强制在一组圆圈中运动。

var force = d3.layout.force()
    .nodes(nodes)
    .size([width, height])
    .gravity(0)
    .charge(0)
    .friction(.9)
    .on("tick", tick)
    .start();

它还具有使用pause/resume通过force.resume();代码暂停操作的功能。

我正在尝试将其移至当前版本的d3中。这是我的force变量版本。

var force = d3.forceSimulation(nodes)
.velocityDecay(.9)
.force("center", d3.forceCenter(width / 2,height / 2))
.force("charge", d3.forceManyBody().strength())
.on("tick", tick)
.start()

我遇到两个错误。我收到start()不是有效函数的类型错误，同时我也收到了tick函数的错误。定义刻度线的代码在这里，但这可能超出此问题的范围。

TypeError: Cannot read property 'alpha' of undefined at Object.tick

function tick(e) {

  var k = 0.03 * e.alpha;

  // Push nodes toward their designated focus.
  nodes.forEach(function(o, i) {
    var curr_act = o.act;

    // Speed of movement change based on user speed.
    if (USER_SPEED == "slow") var damper = .85;
    else var damper = 1;


    o.x += (x(+o.decade) - o.x) * k * damper;

    // If starting at the beginning.
    if (curr_index < 0) {
        o.y += (y('met') - o.y) * k * damper;
        o.color = color('met');
    }

    // Already started.
    else {
        o.y += (y(curr_act) - o.y) * k * damper;
        o.color = color(curr_act);
    }

  });

  circle
      .each(collide(.5))
      .style("fill", function(d) { return d.color; })
      .attr("cx", function(d) { return d.x; })
      .attr("cy", function(d) { return d.y; });
}

在{5}中有没有一种新的方法来start进行力运动？

Answer 1

根据D3.js v5 changelog for d3.force，

部队布局的内部计时器现在自动启动创建，删除force.start。

在d3.js v3.x中，您将需要使用d3.layout.force().start()，但在v5中，将不再需要这种需求。您可以从包含该函数的.start()变量中删除force。这是因为d3.forceSimulation()自动启动，如here所述。

如果出于任何原因需要重新启动模拟，则调用.restart()将允许您reset模拟的内部计时器。

您可以在该变更日志上阅读更多有关它的信息。它有一份非常详细的迁移指南，可以迁移到v4 / 5.x。

d3 v5中的force.start（）等效于什么？

1 个答案: