1

https://github.com/mbostock/d3/blob/master/examples/force/force-multi-foci.htmlのD3の例で、シミュレーションの詳細を動的に変更しようとしています。チェックボックスを入れて、次のようにティックハンドラーを動的に割り当てます（完全なコードはhttp://pastebin.com/k4P0uzHKにあります）：

$("#chkBox").change(function(){
  if ($(this).is(':checked')) {
    force.on("tick", forceTick);
  } else {
    force.on("tick", forceTick2);
  }
});

forceTick = function(e) {
  // Push different nodes in different directions for clustering.
  var ky = 400 * e.alpha;
  var kx = 20 * e.alpha;
  hLinks.forEach(function(hlink) {
    var yB = hlink.source.y, yT = hlink.target.y;
    if (yB<(yT+20)) { hlink.source.y += Math.min(ky,yT+20-yB); hlink.target.y -= Math.min(ky,yT+20-yB);}
    var xB = hlink.source.x, xT = hlink.target.x;
    if (xB<(xT-20)) { hlink.source.x += Math.min(kx,xT-20-xB); hlink.target.x -= Math.min(kx,xT-20-xB);}
    if (xB>(xT+20)) { hlink.source.x -= Math.min(kx,xB-xT-20); hlink.target.x += Math.min(kx,xB-xT-20);}

  });

  node.attr("cx", function(d) { return d.x; })
      .attr("cy", function(d) { return d.y; });

  link.attr("x1", function(d) { return d.source.x; })
       .attr("y1", function(d) { return d.source.y; })
       .attr("x2", function(d) { return d.target.x; })
       .attr("y2", function(d) { return d.target.y; });
};


forceTick2 = function(e) {

  node.attr("cx", function(d) { return d.x; })
      .attr("cy", function(d) { return d.y; });

  link.attr("x1", function(d) { return d.source.x; })
       .attr("y1", function(d) { return d.source.y; })
       .attr("x2", function(d) { return d.target.x; })
       .attr("y2", function(d) { return d.target.y; });
};

しかし実際には、最初に与えられたハンドラーだけが機能するようです。シミュレーションを動的に制御する方法はありますか？

4

2 に答える 2

4

on強制レイアウト（およびd3.dispatchを使用するその他のもの）の演算子は、イベントリスナーを追加します。既存のイベントリスナーを置き換えるものではありません。強制レイアウトは現在、既存のイベントリスナーを削除または置換するメカニズムを公開していません。

それはバグです。onレイアウトの演算子を選択と一致させるつもりです。これにより、on複数回呼び出すことでイベントリスナーを追加、置換、および削除できます。名前空間（「tick.foo」や「tick.bar」など）を使用する場合でも、複数のリスナーを登録できます。

それまでの間、簡単な修正方法は、ティックリスナーとして単一のメソッドを使用することですが、グローバルブール値を使用して、ティックごとに2つの動作のどちらを実行するかを決定します。あなたの場合、次のようなものです。

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

さらに、コードの重複を排除します。:)

于 2011-09-15T03:40:06.833 に答える
1

ここでd3.v4のこの素晴らしい例を見ることができます： https ：//bl.ocks.org/steveharoz/8c3e2524079a8c440df60c1ab72b5d03

ここで重要な機能を確認できます。

// 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();
}
于 2017-08-24T15:06:16.743 に答える