具有自定义中心坐标的圆形布局

Question

我正在用 cytoscape.js 在使用 jVectorMap 生成的世界地图上构建一个动态图。从 json 数据的 LAT / LON 格式坐标开始，我可以将它们转换为 point.x / point.y 在生成的地图上：

var nodePoint = theMap.latLngToPoint(node.data.lat, node.data.lon)

然后我可以在图中添加新节点：

cy.add({
        group: "nodes",
        position: { x: nodePoint.x, y: nodePoint.y },
        style: {
        'background-color': node.color
        },   
        data: {
            id: node.id,
            name: node.label,
            customData: node.data,
        }
    })

这部分有效，但是当 json returns 多个具有相同坐标的节点时，我想将这些节点散布在具有共同 LAT / LON 信息的点周围。

我能够识别这些节点并为它们应用专用布局，但生成的布局位于屏幕中心/div 图。

我想知道是否有一种简单的方法来应用具有特定中心点的圆形布局。

（我想避免实施我正在评估的解决方案......即在中心点周围构建一个边界框并查看会发生什么，（边界框大小随节点号一起增长同点))

Answer 1

在文档中包含的 Wine and cheese 示例中，他们使用边界框强制围绕选定节点 (http://js.cytoscape.org/demos/cde4db55e581d10405f5/) 进行同心布局。

虽然您表示希望避免使用此解决方案，但它似乎是一个简单的解决方案。示例中的实现相当优雅。

具有自定义中心坐标的圆形布局

Circle layout with custom center coordinates

cytoscape.js