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. Следующий рисунок иллюстрирует, как методы из этой бумаги влияют на чертеже узлов, ограниченные в коробке:

И эта картина иллюстрирует случай с различными ограничениями, включая связи между узлами: