javascript - d3.jsは、形状によって制約された直接レイアウトを強制します

Question

d3.jsを使用して力指向のレイアウトを作成し、それを任意の形状で制限する方法があるかどうか疑問に思いました。

• すべてのノードが形状内に均等に分散され、
• 境界線とノード間の距離は、ノード間の距離と同じです。

私はそこにすでにそのような解決策があることを願っています。それ以外の場合、私の考えは、力指向のレイアウトから始めて、各反復でノードから境界までの距離を確認することです。あなたの側からの提案はありますか？

Answer 1

あなたの考えも私のものです。tick 関数では、追加の力を加えることができます。これは私の提案です（テストされていません）：

force.on('tick', function(e) {

  node
    .each(calcBorderDistance)
    .attr('transform', function(d) {
      d.x -= e.alpha*(1/Math.pow(d.borderDistance.x,2);
      d.y -= e.alpha*(1/Math.pow(d.borderDistance.y,2);
      return 'translate(' + d.x + ',' + d.y + ')'; // Move node
    });
});

function calcBorderdistance(d) {
  // Insert code here to calculate the distance to the nearest border of your shape
  var x = ..., y = ...;
  d.borderDistance = {'x':x,'y':y};
}

最も近い境界関数までの逆二次距離は、優れた紙のDrawing Graphs Nicely using Simulated Annealingの式に大まかに基づいています。次の図は、このペーパーのメソッドがボックスで囲まれた描画ノードにどのように影響するかを示しています。

そして、この図は、ノード間のリンクを含む、さまざまな制約がある場合を示しています。