如何在d3js可视化的NetworkX图中为节点添加超链接

我基于NetworkX文档中的JavaScript示例实现了D3.js可视化图，效果对标NetworkX官网首页的交互式图。目前示例可正常运行，但存在两个问题：

• 给节点设置xlink:href属性后，超链接未生效
• 节点Tooltip显示内容为Node2，而非我自定义的MyNode2

现有代码 #

NetworkX生成JSON代码 #

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"  # 超链接未生效

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")

生成的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)

解决方案 #

1. 修复超链接不生效问题 #

NetworkX中设置的xlink:href属性需要在D3.js前端代码中绑定到节点元素上，默认示例未处理该逻辑。修改force.html中的节点创建代码：

原代码（仅创建circle节点）：

var node = svg.append("g")
  .selectAll("circle")
  .data(graph.nodes)
  .enter().append("circle")
  .attr("r", 5)
  .attr("fill", function(d) { return color(d.group); })
  .call(force.drag);

修改后（用<a>标签包裹circle并绑定超链接）：

var node = svg.append("g")
  .selectAll("a")
  .data(graph.nodes)
  .enter().append("a")
  .attr("xlink:href", function(d) { return d["xlink:href"]; })
  .append("circle")
  .attr("r", 5)
  .attr("fill", function(d) { return color(d.group); })
  .call(force.drag);

2. 修复Tooltip显示异常问题 #

默认示例的Tooltip读取的是节点的id属性，需改为读取自定义的name属性。找到Tooltip相关代码：

原代码：

.append("title")
.text(function(d) { return d.id; });

修改后：

.append("title")
.text(function(d) { return d.name; });

内容的提问来源于stack exchange，提问作者Björn Johansson