Question

我正在使用JSNetworkX可视化网络。可视化效果很好，看起来很棒！我想添加一些功能，但根据文档找不到方法。

<!DOCTYPE html>
<html>
<head>
    <title>Graph</title>
    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <script type="text/javascript" src="jsnetworkx.js"></script>
</head>
<body>
<div id="canvas", style="height: 100vh; width: 100%"></div>
<script type="text/javascript">

    var nodesData = [["John", {"Country": "China", "Hobby": "Swimming", "Age": "25"}],
                    ["Marry", {"Country": "China", "Hobby": "Cycling", "Age": "34"}],
                    ["Anna", {"Country": "Germany", "Hobby": "Running", "Age": "27"}],
                    ["Jack", {"Country": "Ukraine", "Hobby": "Running", "Age": "24"}]]

    var edgesData = [["John", "Marry"], ["Marry", "Jack"], ["Marry", "Anna"]]

    var G = new jsnx.Graph();
    G.addNodesFrom(nodesData);
    G.addEdgesFrom(edgesData);

    jsnx.draw(G,{
        element: '#canvas',
        node_style: {
            fill: function(d) {return d.data.color || '#AAA';}
        }
    });
</script>
</body>
</html>

当单击一个节点时，将发生以下情况：

节点，它的边缘和邻居被突出显示
显示一个带有节点属性（在右上角）的框，其中显示：名称，国家/地区，兴趣爱好和年龄（每行一个）

这如何以一种易于理解的方式完成？

JSNetworkX：单击

0 个答案: