Мне было интересно, есть ли способ создать силовой макет с помощью d3.js и ограничить его произвольной формой таким образом, чтобы
Надеюсь, такое решение уже есть. В противном случае моя идея состоит в том, чтобы начать с макета, направленного силой, и проверять расстояния от узлов до границ на каждой итерации. Любые предложения с вашей стороны?
Ваша идея тоже моя. В функции тика вы можете добавить дополнительные силы. Это мое предложение (не проверено):
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};
}
У меня есть обратное квадратичное расстояние до ближайшей граничной функции, основанное на формулах в отличной статье Красивое рисование графиков с помощью имитации отжига. На следующем рисунке показано, как методы из этой статьи влияют на узлы рисования, ограниченные прямоугольником:
И этот рисунок иллюстрирует случай с различными ограничениями, включающими связи между узлами:
