动态更改Javascript D3布局模拟

我正在尝试动态地更改示例中的模拟细节。我放入一个复选框，然后动态分配勾号处理程序，如下所示（完整代码位于）：

$（“#chkBox”）.change（函数（）{
如果（$（this）.is（':checked'））{
强制力（“打勾”，镊子）；
}否则{
强制打开（“勾号”，强制勾号2）；
}
});
forceTick=功能（e）{
//按不同方向推送不同节点以进行群集。
var ky=400*e.alpha；
var kx=20*e.alpha；
hLinks.forEach（函数（hlink）{
var yB=hlink.source.y，yT=hlink.target.y；
如果（yBon

上的

操作符用于强制布局（以及任何其他使用的）添加事件侦听器。它不会替换现有事件侦听器。强制布局当前不会公开删除或替换现有事件侦听器的机制

这是一个错误。我打算使布局的
on
操作符与选择保持一致，这允许您通过多次调用
on
来添加、替换和删除事件侦听器。如果您使用名称空间（例如“tick.foo”和“tick.bar”），您仍然可以注册多个侦听器

同时，简单的解决方法是使用单个方法作为滴答监听器，然后使用一些全局布尔值来确定每个滴答要采取两种行为中的哪一种

if (checked) {
  … clustering …
}
… update link positions …
… update node positions …

另外，这消除了代码重复。
用于强制布局（以及任何其他使用的）的
操作符添加了一个事件侦听器。它不会替换现有的事件侦听器。强制布局当前不会公开一种机制来移除或替换现有的事件侦听器

这是一个错误。我打算使布局的
on
操作符与选择保持一致，这允许您通过多次调用
on
来添加、替换和删除事件侦听器。如果您使用名称空间（例如“tick.foo”和“tick.bar”），您仍然可以注册多个侦听器

同时，简单的解决方法是使用单个方法作为滴答监听器，然后使用一些全局布尔值来确定每个滴答要采取两种行为中的哪一种

if (checked) {
  … clustering …
}
… update link positions …
… update node positions …

另外，这消除了代码重复。：
您可以在这里看到d3.v4的一个很好的例子：

您可以在此处看到重要的功能：

// add forces to the simulation
function initializeForces() {
  // add forces and associate each with a name
  simulation
    .force("link", d3.forceLink())
    .force("charge", d3.forceManyBody())
    .force("collide", d3.forceCollide())
    .force("center", d3.forceCenter())
    .force("forceX", d3.forceX())
    .force("forceY", d3.forceY());
  // apply properties to each of the forces
  updateForces();
}

// apply new force properties
function updateForces() {
  // get each force by name and update the properties
  simulation.force("center")
    .x(width * forceProperties.center.x)
    .y(height * forceProperties.center.y);
  simulation.force("charge")
    .strength(forceProperties.charge.strength * forceProperties.charge.enabled)
    .distanceMin(forceProperties.charge.distanceMin)
    .distanceMax(forceProperties.charge.distanceMax);
  simulation.force("collide")
    .strength(forceProperties.collide.strength * forceProperties.collide.enabled)
    .radius(forceProperties.collide.radius)
    .iterations(forceProperties.collide.iterations);
  simulation.force("forceX")
    .strength(forceProperties.forceX.strength * forceProperties.forceX.enabled)
    .x(width * forceProperties.forceX.x);
  simulation.force("forceY")
    .strength(forceProperties.forceY.strength * forceProperties.forceY.enabled)
    .y(height * forceProperties.forceY.y);
  simulation.force("link")
    .id(function(d) {return d.id;})
    .distance(forceProperties.link.distance)
    .iterations(forceProperties.link.iterations)
    .links(forceProperties.link.enabled ? graph.links : []);

  // updates ignored until this is run
  // restarts the simulation (important if simulation has already slowed down)
  simulation.alpha(1).restart();
}

您可以在这里看到d3.v4的一个很好的例子：

您可以在此处看到重要的功能：

// add forces to the simulation
function initializeForces() {
  // add forces and associate each with a name
  simulation
    .force("link", d3.forceLink())
    .force("charge", d3.forceManyBody())
    .force("collide", d3.forceCollide())
    .force("center", d3.forceCenter())
    .force("forceX", d3.forceX())
    .force("forceY", d3.forceY());
  // apply properties to each of the forces
  updateForces();
}

// apply new force properties
function updateForces() {
  // get each force by name and update the properties
  simulation.force("center")
    .x(width * forceProperties.center.x)
    .y(height * forceProperties.center.y);
  simulation.force("charge")
    .strength(forceProperties.charge.strength * forceProperties.charge.enabled)
    .distanceMin(forceProperties.charge.distanceMin)
    .distanceMax(forceProperties.charge.distanceMax);
  simulation.force("collide")
    .strength(forceProperties.collide.strength * forceProperties.collide.enabled)
    .radius(forceProperties.collide.radius)
    .iterations(forceProperties.collide.iterations);
  simulation.force("forceX")
    .strength(forceProperties.forceX.strength * forceProperties.forceX.enabled)
    .x(width * forceProperties.forceX.x);
  simulation.force("forceY")
    .strength(forceProperties.forceY.strength * forceProperties.forceY.enabled)
    .y(height * forceProperties.forceY.y);
  simulation.force("link")
    .id(function(d) {return d.id;})
    .distance(forceProperties.link.distance)
    .iterations(forceProperties.link.iterations)
    .links(forceProperties.link.enabled ? graph.links : []);

  // updates ignored until this is run
  // restarts the simulation (important if simulation has already slowed down)
  simulation.alpha(1).restart();
}

谢谢，虽然现在我想起来，
.on（“勾选”
）只是改变了可视化效果，它不会停止内部模拟。如果我们能从外部动态改变
alpha
，那就更好了。谢谢，尽管现在我想起来，
.on（“勾选”）
只是更改可视化，它不会停止内部模拟。如果我们可以从外部动态更改
alpha
，效果会更好。