如何从networkx生成与d3.js协同工作的父子关系数据？
从networkx生成与d3.js协同工作的父子关系数据，可以通过以下步骤实现：
- 使用networkx构建图形数据结构：首先，使用networkx库创建一个空的有向图（DiGraph）对象。
import networkx as nx
G = nx.DiGraph()- 添加节点和边：根据需要，使用networkx的add_node()和add_edge()方法添加节点和边。节点可以是任何可哈希的对象，边可以是有向或无向的。
G.add_node("父节点")
G.add_node("子节点1")
G.add_node("子节点2")
G.add_edge("父节点", "子节点1")
G.add_edge("父节点", "子节点2")- 生成父子关系数据：使用networkx的tree_data()函数可以将图形数据结构转换为父子关系的JSON格式数据。
import json
data = nx.tree_data(G, root="父节点")
json_data = json.dumps(data)- 将数据传递给d3.js进行可视化：将生成的JSON数据传递给d3.js，使用d3.js的力导向图（force-directed graph）布局算法进行可视化。
<!DOCTYPE html>
<html>
<head>
<script src="https://d3js.org/d3.v7.min.js"></script>
</head>
<body>
<script>
const data = JSON.parse('生成的JSON数据');
const width = 800;
const height = 600;
const svg = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", height);
const simulation = d3.forceSimulation(data.nodes)
.force("link", d3.forceLink(data.links).id(d => d.id))
.force("charge", d3.forceManyBody())
.force("center", d3.forceCenter(width / 2, height / 2));
const link = svg.selectAll("line")
.data(data.links)
.enter()
.append("line")
.attr("stroke", "black");
const node = svg.selectAll("circle")
.data(data.nodes)
.enter()
.append("circle")
.attr("r", 10)
.attr("fill", "blue");
simulation.on("tick", () => {
link
.attr("x1", d => d.source.x)
.attr("y1", d => d.source.y)
.attr("x2", d => d.target.x)
.attr("y2", d => d.target.y);
node
.attr("cx", d => d.x)
.attr("cy", d => d.y);
});
</script>
</body>
</html>以上代码将生成一个基于d3.js的力导向图，其中节点表示父子关系中的节点，边表示父子关系中的连接。可以根据需要自定义节点和边的样式。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云产品：https://cloud.tencent.com/product
- 云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 云数据库 MySQL 版：https://cloud.tencent.com/product/cdb_mysql
- 云原生应用引擎（TKE）：https://cloud.tencent.com/product/tke
- 人工智能平台（AI Lab）：https://cloud.tencent.com/product/ai
- 物联网开发平台（IoT Explorer）：https://cloud.tencent.com/product/iotexplorer
- 移动应用开发平台（MADP）：https://cloud.tencent.com/product/madp
- 对象存储（COS）：https://cloud.tencent.com/product/cos
- 区块链服务（BCS）：https://cloud.tencent.com/product/bcs
- 腾讯云元宇宙：https://cloud.tencent.com/solution/virtual-universe
相关·内容
我想从python networkx生成父子关系数据。我正在使用多向图。我想使用下面的javascript来生成html格式的图形：所以，我的问题是，我如何从networkx中生成像上面的parent.child关系数据一样的数据？
浏览 15提问于2017-07-09得票数 1
回答已采纳
我有一个networkx图我想画出这个可视化的图像
要将此图形转换为树..我将给出一个种子节点，作为这个json的根，然后通过向这棵树添加边作为它的子节点来增长树
浏览 3提问于2014-01-10得票数 2
我有一个图表，我想用d3.js来可视化。具体地说，我有一个邻接矩阵，如下所示(选择数据，而不是全集)：A B 1.0
A C我希望能够使用力定向图形来显示我的网络，特别是。我知道如何创建NetworkX图形，但我希望能够在d3.js中尝试这一点，因为我希望稍后能够在节点属性的显示上添加鼠标，我认为使用d3是可能的，但使用matplotlib是不可能<
浏览 0提问于2013-10-29得票数 2
回答已采纳
我是图神经网络的新生。最近，我一直在努力在交通网络上做TGCN。将数据点加载到Geopandas DataframeRetrieve : OSMNX为我提供了很大帮助，并通过从OpenStreetMapParing检索信息生成了NetworkX图，基于配对点生成新的</em
浏览 6提问于2022-10-07得票数 0
我使用ASP.NET 4.5、C#和D3.js构建了一个接口，在这里我绘制了人体的器官和骨骼。问题是，当我尝试打印时，它几乎从来没有正确地打印出来，我的用户希望在可视化的旁边有一个"Save Image“按钮，这样他们就可以将保存的图像导入到他们自己的Word/PowerPoint的月份报告中。我不确定我是否需要发布我的代码。我只是加载一些我在Illustrator中跟踪的SVG，将它保存在一个JSON文件中并加载
浏览 8提问于2017-01-25得票数 2
回答已采纳
我试图完成一个显而易见的步骤，编写由json_graph生成的NetworkX文件，以便将其读入D3.js。我可以在没有问题的情况下将它打印到控制台，所以我可以验证它是否可以创建适当的JSON数据。但是，我将其保存到文件中的尝试失败了，而且(与Python一样)文档基本上毫无价值。(G))
如果我用一个简单的字符串而不是json图运行相同的代码，那么它就能很好地工作</em
浏览 15提问于2015-08-21得票数 3
回答已采纳
1回答
我是新的d3.js图表在excel。我读到了将excel图表转换为D3图表的插件。在excel中使用d3图表的方法有哪些？我试用了excel 2013中的插件。但没有发现它是用户友好的添加动态数据。还是没有完全的想法。请帮帮忙
浏览 2提问于2018-02-26得票数 3
1回答
我已经将graphml从Gephi导入到NetworkX。G = nx.read_graphml(r"pah\EXPORTCM0606.graphml")
在Gephi中，我计算了模块化类，获得了6个主要的社区，现在我想在NetworkX中获得这些社区，以便获得他们推文中最频繁的单词所以我的问题是双重的:我如何使用NetworkX从G中获得这些已经在Gephi中计算的模块化类社区
浏览 48提问于2021-06-20得票数 0
2回答
在我的perl脚本中，Ive通过SNMP从我网络中的cisco路由器收集CDP邻居信息(在本例中是设备的ip地址)，从而填充了一个二维哈希。哈希允许我限制重复并捕获父子关系。$name{$hostIP}{$neighbourIP} = $name;{
浏览 3提问于2012-12-18得票数 1
回答已采纳
介绍了yield from语法，并指出：其中是计算为可迭代的表达式，从中提取迭代器。因此，以下内容是合法的，也是有意义的：
因为生成器和基于生成器的协同线都是Iterable的实例。因为声明本机协同器不实现_
浏览 1提问于2019-07-12得票数 4
1回答
我必须创建一个金字塔可视化从数据使用d3.js。附了一个示例视图。有两个挑战，我正在寻求帮助。在下面给出的例子中，我理解如何创建金字塔，但我不明白如何在每个级别添加多个元素(如A、B、C等值在图像中显示)，I希望为最低层的一些元素添加一个类似树的结构。
const data =
浏览 2提问于2020-06-10得票数 2
回答已采纳
13回答
有人能推荐一个可以进行交互式图形可视化的Python库吗？
-它只做Matplotlib的情节，而那些似乎是2D的。我没有看到任何形式的交互性，比如d3.js给出的交互作用，比如移动节点。-它只做二维的情节，并且有非常慢的交互图。
浏览 25提问于2012-10-19得票数 130
1回答
我有一个代码，可以在文本文件中的数据之间创建邻接关系。文件结构非常简单。它只有两个列来描述两个节点之间的连接。16 STAT_HISTCUSTOM_DATA AND_11DICT_DEAL BFG_2056 yield from recur([node])
例如，我之前给出<e
浏览 4提问于2021-08-24得票数 1
回答已采纳
1回答
在尝试使用urlread2从网站中抓取数据时，我收到了一条错误消息，其中包含以下Java：“无法生成DH键盘”如何让urlread2与HTTPS协同工作？
浏览 3提问于2016-02-17得票数 0
回答已采纳
我有一个Json原始数据与父子关系。我想生成分层的json从平面与父in。我已经尝试了下面的代码，它的工作正常，但我想知道如何删除children[]对象，如果没有数据在子对象。
浏览 17提问于2020-04-04得票数 1
我正在创建的应用程序，离线和在线工作…但我应该以何种方式将数据从sqlite数据库同步到服务器。我正在使用web服务来接受应用程序的请求，但问题是我在sqlite数据库中有多个表，它们类似于父子关系，并且每个记录都具有id列，但在服务器端与Id列存在相同的表结构，它是由服务器自动生成的身份列，但在应用程序的本地数据库上我不能使用另一种情况-我必须
浏览 0提问于2013-02-13得票数 2
1回答
</div>组成的自定义控件如何？如何使textarea like <div>与:focus-visible协同工作
如何</e
浏览 2提问于2021-10-08得票数 3
4回答
我正在尝试让AJAX与SlickGrid协同工作。。
另外，我不认为缓存在这个例子中是有效的。由于Digg的速率限制，很难真正感受到它是如何工作的。如何将SlickGrid设置为使用分页从数据库中获取数据。
浏览 7提问于2011-07-13得票数 16
1回答
Networkx图和标签
、、、
我在理解networkx库是如何工作的&节点的标签方面遇到了一些麻烦。假设我在pandas数据帧中有一个相关矩阵： import pandas as pdimport matplotlib.pyplot as plt
D =(在本例中是一个三角形)，然后为较大的相关矩阵/距离矩阵生成最小生成树。在节点上，我有自循环边{'weight'
浏览 25提问于2021-02-11得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
