投影图节点的相对位置，以绝对坐标

我有一个数据结构是这样的：投影图节点的相对位置，以绝对坐标

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

投影图节点的相对位置，以绝对坐标

回答

相关问题