d3画力导向图——分别上传网络图中点跟边的数据_d3力导向图印入数据文件-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_39051660/article/details/102608336

本文介绍如何使用D3.js绘制拓扑网络的力导向图，并分享了一种将节点和边数据分别存储在不同文件中的加载方法。通过两次d3.json调用，实现了复杂数据的灵活处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

d3画力导向图——分别上传网络图中点跟边的数据

最近连续好长一段时间没有刷LeetCode跟写博客了，深度学习方面的学习也落下了，不知道自己在干嘛有点烦。这段时间在做其他事的同时也在做一个可视化的东西，稍微学了一下D3，用D3画了一下拓扑网络的力导向图。但是在书里看到的都是直接编几个数据，网上看到的不是直接编几个数据，就是上传一个包含了点跟边的数据文件，也就是json文件是类似这样格式的文件：

{
	'nodes':
		[{'id':0}, 
		{'id':1}, 
		{'id':2}],
	'links':
		[{'source':0, 'target':1},
		{'source':0, 'target':2},
		{'source':1, 'target':2}]
}

画力导向图时，就直接加载整个包含了nodes跟links的json文件。因为我们搞的数据量比较大，原始数据并不方便生成这种结构的文件，我是将点跟边的数据分别放在了两个文件下，一个存放nodes，一个存放links。而D3在画力导向图的时候，是导入数据后在这个导入的语句里进行的，什么意思呢？可以看下加载部分的代码（完整的代码可以看下别的博客，有很多博客都有介绍怎么用D3画力导向图）：

d3.json("demo2.json",function(error,graph){
		    if(error) return console.error(error);
		    console.log(graph);
		    console.log(graph.nodes);		    
		    console.log(graph.links);

		    var link = svg.append("g")
							.attr("class","links")
							.selectAll("line")
							.data(graph.links)
							.enter()
							.append("line")
							.style("stroke", "#ccc")
							.attr("stroke-width", 1);

		    var node = svg.append("g")
		               .attr("class","nodes")
		               .selectAll("circle")
		               .data(graph.nodes)
		               .enter()
		               .append("circle")
		               .attr("r",5)
		               .attr("fill",function(d, i){return color(i);})
		               .call(d3.drag()
		                   .on("start",dragstarted)
		                .on("drag",dragged)
		                .on("end",dragended));
}

一开始我一直在尝试直接在body内部加载数据赋值，然后直接在svg里调用，但一直没出东西，调用console.log()看发现读取json文件赋值的话好像并没有用，赋值的结果会是空的。搜了很久一直没看到有将点跟边的数据分开放的处理，后来我尝试将一个文件的读取放在另一个文件里，发现真的可行。以下是数据读取部分的代码：

d3.json("nodesWeek30.json",function(error1,data1){
	if(error1) return console.error(error1);
	//console.log(data1.data);
	dataNodes = data1.data;

	d3.json("edgesWeek30.json",function(error2,data2){
		if(error2) return console.error(error2);
		//console.log(data2.data);
		dataEdges = data2.data;

		var link = svg.append("g")
						.attr("class","links")
						.selectAll("line")
						.data(dataEdges)
						.enter()
						.append("line")
						//.style("stroke", function(d, i){return color(i);})
						.style("stroke", "steelblue")
						.attr("stroke-width", 0.1);

		var node = svg.append("g")
						.attr("class","nodes")
						.selectAll("circle")
						.data(dataNodes)
						.enter()
						.append("circle")
						.attr("r",function(d){return d.size})
						.attr("fill", "#ff0000")
						//.attr("fill",function(d, i){return color(i);})
						.call(d3.drag()
						.on("start",dragstarted)
						.on("drag",dragged)
						.on("end",dragended));

		simulation.nodes(dataNodes)
					.on("tick",ticked)
					.force("link")
					.links(dataEdges);

虽然很简单，但却没有人提到，所以就更一下啦~
今天实验室到了新的主机，作为小菜鸡拿到了外星人主机真的是超级开心了~冲鸭！