如何在 d3js NetworkX diGraph 中超链接节点

Question

我想创建一个 NetworkX 图并使用 d3js 对其进行可视化，类似于 NetworkX 文档中的 javascript example。该图与 NetworkX 主页page上的交互式图非常相似。

该示例适用于我，但我想添加指向节点的超链接。我想我有名为“xlink:href”的节点属性，但我还没弄清楚如何。

这个问题是针对 NewtworkX 和散景可视化这里提出的。我没有测试这个例子，因为我想使用 d3js。以下代码可在此处获取。

到目前为止：

import json
import networkx as nx

G = nx.Graph()
G.add_node('Node1')
G.add_node('Node2')
G.add_edge('Node1', 'Node2')

for n in G:
    G.nodes[n]["name"] = "My" + str(n) 
    G.nodes[n]["xlink:href"] = "http://google.com"  # <==<< link Not working

d = nx.json_graph.node_link_data(G)

json.dump(d, open("force/force.json", "w"))
print("Wrote node-link JSON data to force/force.json")

以上产生：

{'directed': False,
 'multigraph': False,
 'graph': {},
 'nodes': [{'name': 'MyNode1',
   'xlink:href': 'http://google.com',
   'id': 'Node1'},
  {'name': 'MyNode2', 'xlink:href': 'http://google.com', 'id': 'Node2'}],
 'links': [{'source': 'Node1', 'target': 'Node2'}]}

可以这样可视化：

# Serve the file over http to allow for cross origin requests
import flask
app = flask.Flask(__name__, static_folder="force")

@app.route("/")
def static_proxy():
    return app.send_static_file("force.html")
app.run(port=8001)

有趣的是，图表上的工具提示显示“Node2”而不是“MyNode2”。

尝试解决此问题时收集的链接：

• https://github.com/simonlindgren/nXd3
• http://www.d3noob.org/2014/05/include-html-link-in-d3js-tool-tip.html
• https://networkx.org/documentation/stable/reference/readwrite/json_graph.html

Answer 1

我从未使用过JavaScript，但似乎你只需要更新force.js的第36行

：

    node.append("title")
        .text(function (d) {
            return d.name; // << instead of d.id
        });

预览（

位于 http://127.0.0.1:8001/）：