JSNetworkX: Показать атрибуты узла при клике - PullRequest
Новая
       35

JSNetworkX: Показать атрибуты узла при клике

0 голосов
/ 25 апреля 2019

Я использую 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>

Когда вы нажимаете на узел, должно произойти следующее:

  • узел, его края и соседи выделены
  • Отображается поле с атрибутами узла (в верхнем правом углу), отображающими: Имя, Страна, Хобби и Возраст (по одному на строку)

Как это можно сделать простым и понятным способом?

...