投影圖節點的相對位置，以絕對座標

我有一個數據結構是這樣的：投影圖節點的相對位置，以絕對座標

nodes = [ 
     { 
      "id":0, 
      "proximities":{ 
      "1": 12.34, 
      "2": 56.78 
      }, 
     { 
      "id":1, 
      "proximities":{ 
      "0": 12.34, 
      "2": 90.12 
      }, 
     { 
      "id":2, 
      "proximities":{ 
      "0": 56.78, 
      "1": 90.12 
      }, 
     ]

這是我想在屏幕上放置節點的數組。每個節點包含一組「近似值」，與其他節點的數字距離，並且我想使用這些距離來計算顯示節點的絕對XY位置。也就是說，我們想通過算法計算一個佈局，其中每對節點之間的距離儘可能接近數據中給出的距離。

我已經將這個問題標記爲d3，因爲我將使用d3繪製圖形，並且對它具有的任何內置功能感到好奇，這可能會讓我更容易。

這就是說，我的問題的根源更廣泛：是否有我在這裏要做的事情的名稱？我確信有圖解理論方法來解決這個問題，但是我很難找到它們，因爲我不確定這個問題被稱爲什麼。我應該怎樣Google？

來源

2015-12-13 drewmoore

D3沒有內置任何內容。一般來說，你應該能夠迭代地做到這一點 - 放置第一個節點，將第二個節點放在適當距離的一個點上，將第三個節點放置在與前兩個節點適當的距離，依此類推。它看起來像你的數據有點狡猾，但距離0-2不等於距離2-0。 –

@LarsKotthoff謝謝。不同的距離是一個錯字 - 這些確實是對稱的。在我注意到的時候，你能否想到一種方法，我可以通過使用強制定向佈局來近似這一任務，以某種方式將接近關係表示爲加權邊緣？ – drewmoore

部隊佈局不會在這裏工作。我會採用我描述的方法。 –

這是我如何接近你的問題集。

我的節點及其鄰近區域是這樣的：

nodes = [{ 
    "id": 0, 
    name: "cyril", 
    "proximities": { 
    "1": 12.34, 
    "2": 56.78, 
    "3": 40 
    } 
}, { 
    "id": 1, 
    name: "tia", 
    "proximities": { 
    "0": 12.34, 
    "2": 90.12 
    } 
}, { 
    "id": 2, 
    name: "josh", 
    "proximities": { 
    "0": 56.78, 
    "1": 90.12 
    } 
}, { 
    "id": 3, 
    name: "sim", 
    "proximities": { 
    "0": 40, 
    } 
}]

把數據集的強制佈局D3格式化接受。

function makeNodesLinks(nodes) { 

    var graph = {}; 
    graph.nodes = []; 
    graph.links = []; 
    var keys = []; 

    nodes.forEach(function(d) { 
    //add node 
    graph.nodes.push({ 
     name: d.name, 
     id: d.id 
    }); 
    for (var key in d.proximities) { 
     if (keys.indexOf(d.id + "-" + key)<0)//this means if link is present don't add 
     { 
     keys.push(d.id + "-" + key);//done to make links unique 
     keys.push(key + "-" + d.id); 
     //add link and value stores its approx distance. 
     graph.links.push({ 
      source: d.id, 
      target: parseInt(key), 
      value: d.proximities[key] 
     }); 
     } 
    } 
    }); 
    return graph; 
}

最後在力佈局中，鏈接之間的距離由值鍵決定。

force 
    .nodes(graph.nodes) 
    .links(graph.links) 
    .linkDistance(function(d) { 
     return d.value*3;//approx distance between 2 nodes. 
    }) 
    .start();

工作代碼here。

現在，如果您不想看到鏈接，請在CSS中更改樣式：使不透明度爲0，以使其不可見。

.link { 
    stroke: #999; 
    stroke-opacity: 0; 
}

來源

2015-12-13 07:52:53 Cyril

它確實有幫助 - 很好的答案，對於遲到接受抱歉！ – drewmoore

投影圖節點的相對位置，以絕對座標

回答

相關問題