无法可视化d3.js为jupyter笔记本中的networkx图形创建的图形。“图形.json“正在创建文件，但没有视觉应用程序

Question

我是javascript新手，我编写了以下代码来使用d3.js显示networkx图形。我正在运行jupyter笔记本中的代码。我没有得到任何输出。没有错误，没有想象。你知道吗

import json
from networkx.readwrite import json_graph
data = json_graph.node_link_data(G[0])
with open('graph.json', 'w') as f:
    json.dump(data, f, indent=4)


` %%html
    <div id="d3-example"></div>
    <style>
    .node {stroke: #fff; stroke-width: 1.5px;}
    .link {stroke: #999; stroke-opacity: .6;}
    </style>`



 %%javascript
    require(["d3"], function(d3){
    var force = d3.layout.force().charge(-120).linkDistance(30).size([width, height]);
    var svg = d3.select("#d3-example").select("svg");
    d3.json("graph.json", function(error, graph) {
    force.nodes(graph.nodes).links(graph.links).start();
    var link = svg.selectAll(".link").data(graph.links).enter().append("line").attr("class", "link");
    var node = svg.selectAll(".node").data(graph.nodes).enter().append("circle")
    .style("fill", function(d) {
        return color(d.club);
    })
    .call(force.drag);
    });
});`