siła skierowana d3.js układ ograniczona przez kształt

Question

ja zastanawiać, czy jest sposób tworzenia siłę skierowaną układ z d3.js i ograniczają go dowolnego kształtu, w taki sposób, że

• wszystkich węzły są równoważnie rozprowadzane ciągu kształt i
• odległość między granicą a węzłami jest równie do odległości między węzłami

mam nadzieję, że nie jest już takie rozwiązanie tam. W przeciwnym razie, moim pomysłem jest zacząć od układu ukierunkowanego na siłę i sprawdzić odległości od węzłów do granic w każdej iteracji. Wszelkie sugestie z twojej strony?

Answer 1

Twój pomysł też jest mój. W funkcji tick możesz dodać dodatkowe siły. To jest moja propozycja (nie testowane):

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}; 
} 

mam odwrotny kwadratowego odległość do najbliższego funkcji granicznego luźno oparty na wzorach w Excelent papieru Drawing Graphs Nicely using Simulated Annealing. Poniższy rysunek ilustruje, jak z tej metody wpływa na papierze rysunek węzły odgraniczone pudełku:

I ten obraz przedstawiają sprawę z różnych ograniczeń, z udziałem związków między węzłami: