我有一個一維資料集（一個只有水平位置（ 圓半徑）的元素串列）。
我想實作一個簡單的布局演算法來將此資料集顯示為比例尺中的圓圈。問題是碰撞。
我想實作一個“簡單”的排斥力來避免碰撞。我不介意圓圈不再有精確的位置。我正在尋找的結果很簡單：
我沒有使用 D3，它是純 js（和 svg.js），從哪里開始尋找有關此布局的理論資訊？提到這種力的通用名稱是什么？有沒有類似的例子？
uj5u.com熱心網友回復：
我添加min_gap了元素之間的最小邊距。所以解決方案是一次移動一小步移動兩個相交距離最大的相交元素。
const elements = [{pos:10, radius:5}, {pos:15, radius: 20}, {pos:20, radius:10}, {pos:150, radius:5}];
const field_size = [0, 300];
const min_gap = 5;
const step = 1;
moveIntersected(elements);
console.log(elements);
function detectCollisions(arr=[]){
const result = [];
for(let i=0; i < arr.length - 1; i ){
let dist = (arr[i 1].pos - arr[i 1].radius) - (arr[i].pos arr[i].radius);
if(dist < min_gap){
result.push([i 0.5, dist]);
}
}
return result;
}
function moveIntersected(arr=[]){
const collisions = detectCollisions(arr);
if(collisions.length < 1) return;
const most_intersected = collisions.sort((a,b) => a[1] - b[1])[0];
const left = arr[Math.floor(most_intersected[0])];
const right = arr[Math.ceil(most_intersected[0])];
if(left.pos - left.radius - step >= field_size[0]){
left.pos -= step;
} else {
right.pos = step*2;
}
if(right.pos right.radius step <= field_size[1]){
right.pos = step;
} else {
left.pos -= step*2;
}
moveIntersected(arr);
}轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/348625.html
標籤：javascript svg SVG.js