Javascript 无法在jupyter笔记本中可视化d3.js为networkx图形创建的图形&引用；graph.json“；正在创建文件，但未显示任何视觉效果

我是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);
    });
});`

导入json
从networkx.readwrite导入json\u图形
data=json\u graph.node\u link\u data（G[0]）
将open（'graph.json'，'w'）作为f：
dump（数据，f，缩进=4）
`%%html
.node{stroke:#fff；笔划宽度：1.5px；}
.link{stroke:#999；笔划不透明度：.6；}
`
%%javascript
要求（[“d3”]，功能（d3）{
var-force=d3.layout.force（）.charge（-120）.链接距离（30）.大小（[宽度，高度]）；
var svg=d3.选择（“d3示例”）.选择（“svg”）；
d3.json（“graph.json”，函数（错误，图形）{
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（“圆”）
.样式（“填充”，功能（d）{
返回颜色（d.club）；
})
.呼叫（强制拖动）；
});
});`

这里似乎有一个空的选择：

var svg=d3.select（“d3示例”）.select（“svg”）-您有一个带有ide
d3 select
的元素，但它不包含svg。您可以尝试将svg添加到
d3示例
div:
，但我也没有看到强制布局所需的东西，例如勾号函数。谢谢您的建议，但问题是我对这种环境完全陌生。我没有使用像d3.js这样的javascript库进行可视化。我在python中工作，我基本上希望可视化networkx图形。你能给我介绍一种更合适的方法吗？我添加了一个tick函数，你能验证一下错误吗？如果没有看到你的tick函数，或者你用svg更新了代码，恐怕我就无能为力了。如果您在勾号功能中进行编辑和任何其他更改，都会有所帮助。