D3力导图绘制-基于line/path(v3、v7)

结果展示  

d3的版本之间很不一样,一定要对应上自己是v3 or v5 or v7

数据来源:开源开放|新冠知识图谱开放数据集第二批_病毒

v3版本:有简单的交互,可以拖拽,鼠标放上去能显示简介

v7版本(可以拖拽,拖起来比v3版本顺滑很多):

 

主要过程

基于Line的力导向图绘制

全部代码:

<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>D3力导图v3
		</title>
	</head>
	<body>
	<script src="d3.v3.min.js"></script>
		<script>
			var w = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;

			var h = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight; 
			w=w*0.98;
			h=h*0.98;

var nodes=[
			//0
			{name:"2019新型冠状病毒",url:"https://baike.baidu.com/item/2019%E6%96%B0%E5%9E%8B%E5%86%A0%E7%8A%B6%E7%97%85%E6%AF%92",intro:"2019新型冠状病毒(2019-nCoV,世卫组织2020年1月命名;SARS-CoV-2,国际病毒分类委员会2020年2月11日命名)。"},
			//1
 		  {name:"SARS冠状病毒",url:"https://baike.baidu.com/item/SARS%E7%97%85%E6%AF%92",intro:"SARS病毒属于套式病毒目、冠状病毒科、冠状病毒属,为β属B亚群冠状病毒。病毒粒子多呈圆形,有囊膜,外周有冠状排列的纤突,分布于细胞浆中,呈圆形,病毒直径在80~120nm之间。"},
			//2
 		  {name:"冠状病毒",url:"https://baike.baidu.com/item/%E5%86%A0%E7%8A%B6%E7%97%85%E6%AF%92",intro:"冠状病毒在系统分类上属套式病毒目(Nidovirales)冠状病毒科(Coronaviridae)冠状病毒属(Coronavirus)。冠状病毒属的病毒是具囊膜(envelope)、基因组为线性单股正链的RNA病毒,是自然界广泛存在的一大类病毒。"},
 		  //3
  	  {name:"RNA病毒",url:"https://baike.baidu.com/item/RNA%E7%97%85%E6%AF%92",intro:"RNA病毒是病毒的一种,属于一级。 它们的遗传物质是核糖核酸(RNA ribonucleic acid)。通常其核酸是单链的(ssRNA single-stranded RNA),也有双链的(dsRNA double-stranded RNA)。"},
			//4
    	{name:"2019新型冠状病毒感染肺炎",url:"https://baike.baidu.com/item/%E6%96%B0%E5%9E%8B%E5%86%A0%E7%8A%B6%E7%97%85%E6%AF%92%E8%82%BA%E7%82%8E/24282529?fromtitle=NCP&fromid=24330455",intro:"新型冠状病毒肺炎(Corona Virus Disease 2019,COVID-19),简称“新冠肺炎”,世界卫生组织命名为“2019冠状病毒病”,是指2019新型冠状病毒感染导致的肺炎。"},
			//5
      {name:"糖皮质激素",url:"https://baike.baidu.com/item/%E7%B3%96%E7%9A%AE%E8%B4%A8%E6%BF%80%E7%B4%A0",intro:"糖皮质激素(GC)是机体内极为重要的一类调节分子,它对机体的发育、生长、代谢以及免疫功能等起着重要调节作用,是机体应激反应最重要的调节激素,也是临床上使用最为广泛而有效的抗炎和免疫抑制剂。"},
	    //6
			{name:"药物",image:"https://baike.baidu.com/item/%E8%8D%AF%E7%89%A9/588291",intro:"药物是用以预防、治疗及诊断疾病的物质。在理论上,药物是指凡能影响机体器官生理功能及细胞代谢活动的化学物质都属于药物的范畴,也包括避孕药。"},
      //7
      {name:"传染病科",url:"https://baike.baidu.com/item/%E4%BC%A0%E6%9F%93%E7%97%85%E7%A7%91",intro:"传染病科是治疗传染病的部门。常见传染病有菌痢、伤寒、霍乱、甲型毒性肝炎、流脑、猩红热、百日咳、流感、麻疹、丝虫病、乙型脑炎、血吸虫病等。"},
      //8
      {name:"疾病",url:"hhttps://baike.baidu.com/item/%E7%96%BE%E7%97%85/925932",intro:"疾病(Disease)是一个极其复杂的过程,许多情况下,从健康到疾病是一个由量变到质变的过程。"},
      //9
      {name:"医学病科",url:"",intro:""},
      //10
      {name:"血液检查",url:"https://baike.baidu.com/item/%E8%A1%80%E6%B6%B2%E6%A3%80%E6%9F%A5",intro:"临床血液检测可分为血液一般检测、溶血性贫血的实验室检测、骨髓细胞学检测、血型鉴定与交叉配血试验。可以检测出常见血液病的血液学持征。"},
      //11
      {name:"影像学检查",url:"https://baike.baidu.com/item/%E5%BD%B1%E5%83%8F%E5%AD%A6/7379494",intro:"影像学不仅扩大了人体的检查范围,提高了诊断水平,而且可以对某一些疾病进行治疗。这样,就大大地扩展了本学科的工作内容,并成为医疗工作中的重要支柱。"},
      //12
      {name:"检查科目",url:"",intro:""},
      //13
      {name:"发热",url:"https://baike.baidu.com/item/%E5%8F%91%E7%83%AD/35767",intro:"症状名,正常人在体温调节中枢的调控下,机体的产热和散热过程经常保持动态平衡,当机体在致热源作用下或体温中枢的功能障碍时,使产热过程增加,而散热不能相应地随之增加或散热减少,体温≥37.3℃称为发热。"},
      //14
      {name:"乏力",url:"https://baike.baidu.com/item/%E4%B9%8F%E5%8A%9B",intro:"乏力是临床上最常见的主诉症状之一,属非特异性疲惫感觉。表现为自觉疲劳、肢体软弱无力。生理状态下,乏力在休息或进食后可缓解,而病理性乏力则不能恢复正常。"},
      //15
      {name:"干咳",url:"https://baike.baidu.com/item/%E5%B9%B2%E5%92%B3",intro:"干咳(dry cough)指咳嗽无痰;或痰极少,不易排出的表现。干咳是临床肺部疾病常见症状之一,病因复杂。"},
      //16
      {name:"症状",url:"https://baike.baidu.com/item/%E7%97%87%E7%8A%B6",intro:"疾病过程中机体内的一系列机能、代谢和形态结构异常变化所引起的病人主观上的异常感觉或某些客观病态改变称为症状(symptom)。"}];
		var edges=[{source:0,target:1,relation:"相似病毒"},
				       {source:0,target:2,relation:"属于"},
				       {source:1,target:2,relation:"属于"},
	         	   {source:2,target:3,relation:"子类"},
	         	   {source:0,target:4,relation:"引起"},
	         	   {source:5,target:4,relation:"适用于"}, 
			         {source:5,target:6,relation:"属于"},
			         {source:7,target:4,relation:"治疗"},
			         {source:4,target:8,relation:"属于"}, 
			         {source:7,target:9,relation:"属于"}, 
			         {source:4,target:10,relation:"检测"},
			         {source:4,target:11,relation:"检测"},
			         {source:10,target:12,relation:"检查科目"}, 
			         {source:11,target:12,relation:"检查科目"},  
			         {source:4,target:13,relation:"病症"},
			         {source:4,target:14,relation:"病症"},
			         {source:4,target:15,relation:"病症"},
			         {source:13,target:16,relation:"属于"}, 
			         {source:14,target:16,relation:"属于"},
			         {source:15,target:16,relation:"属于"}
			       ];
			   

		//提示框
		var tooltip=d3.selectAll("body")  
                  .append("div")  
                  .attr("class","tooltip")  
                  .style("opacity",0.0);  	

		var force=d3.layout.force()
						    .charge(-600)
					      .linkDistance(200)
				      	.size([w,h]);

		var svg=d3.select("body")
				 		  .append("svg")
						  .attr("width",w)
						  .attr("height",h);

		force.nodes(nodes)
	  		 .links(edges)
	   		 .start();

		var link=svg.selectAll(".link")
				   .data(edges)
				   .enter()
				   .append("line")
				   .attr("class","link")
				   .style("stroke-width",1)
				   .style("stroke","grey");
		var node=svg.selectAll(".node")
					.data(nodes)
					.enter()
					.append("circle")
					.attr("class","node")
					.attr("r",function(d){return d.weight*3;})
					.attr("cx",100)
					.attr("cy",100)
					.style("stroke","grey")
					.style("stroke-width","1px")
					.style("fill",function(d,i) {
						return getColor(i);
					})
					.style("opacity","0.85")
					.on("mouseover",function(d,i){    //加入提示框
                        tooltip.html("简介:"+d.intro)
                               .style("left",(d3.event.pageX)+"px")  
                               .style("top",(d3.event.pageY+20)+"px")
                               .style("width","220px")
                               .style("font-size","5px")  
                               .style("opacity",1.0);  
					})
					.call(force.drag);
		var ntext=svg.selectAll(".ntxt")
					.data(nodes)
					.enter()
					.append("text")
					.attr("class","ntxt")
					.attr("dx","-2em")
					.attr("dy","2em")
					.style("font-size","15px")
					.text(function(d){return d.name;});
		var etext=svg.selectAll(".etxt")
					.data(edges)
					.enter()
					.append("text")
					.attr("class","etxt")
					.style("font-size","10px")
					.text(function(d){return d.relation;});



		force.on("tick",function(){
			node.attr("cx",function(d){return d.x;})
			    .attr("cy",function(d){return d.y;})

			link.attr("x1",function(d){return d.source.x;})
			    .attr("y1",function(d){return d.source.y;})
			    .attr("x2",function(d){return d.target.x;})
			    .attr("y2",function(d){return d.target.y;})

			ntext.attr("x",function(d){return d.x;})
			     .attr("y",function(d){return d.y;})

			etext.attr("x",function(d){return (d.source.x+d.target.x)/2})
			     .attr("y",function(d){return (d.source.y+d.target.y)/2})
		})
		
		function getColor(i) {
		var palette = [
				'#94b5cd','#70aace','#1c83b6','#2678b7','#0270ab'
				] 
		return palette[(i+2)%palette.length];
  }
		</script>

<style scoped>
svg {
  border: 1px solid #ccc;
}
div.tooltip {
    position: fixed;
    text-align: center;
    height: auto;
    padding: 2px;
    background: lightsteelblue;
    border: 0px;
    border-radius: 8px;
    pointer-events: none;
}
</style>
	</body>
</html>

基于Path的力导向图绘制

全部代码:

<html>
	<head>
	<meta charset="utf-8">
		<title>Path力导图v3
		</title>
	</head>
	<body>
		<script src="d3.v3.min.js"></script>
		<script>
			var w = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;

			var h = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight; 
			w=w*0.95;
			h=h*0.95;

var nodes=[
			//0
			{name:"2019新型冠状病毒",url:"https://baike.baidu.com/item/2019%E6%96%B0%E5%9E%8B%E5%86%A0%E7%8A%B6%E7%97%85%E6%AF%92",intro:"2019新型冠状病毒(2019-nCoV,世卫组织2020年1月命名;SARS-CoV-2,国际病毒分类委员会2020年2月11日命名)。"},
			//1
 		  {name:"SARS冠状病毒",url:"https://baike.baidu.com/item/SARS%E7%97%85%E6%AF%92",intro:"SARS病毒属于套式病毒目、冠状病毒科、冠状病毒属,为β属B亚群冠状病毒。病毒粒子多呈圆形,有囊膜,外周有冠状排列的纤突,分布于细胞浆中,呈圆形,病毒直径在80~120nm之间。"},
			//2
 		  {name:"冠状病毒",url:"https://baike.baidu.com/item/%E5%86%A0%E7%8A%B6%E7%97%85%E6%AF%92",intro:"冠状病毒在系统分类上属套式病毒目(Nidovirales)冠状病毒科(Coronaviridae)冠状病毒属(Coronavirus)。冠状病毒属的病毒是具囊膜(envelope)、基因组为线性单股正链的RNA病毒,是自然界广泛存在的一大类病毒。"},
 		  //3
  	  {name:"RNA病毒",url:"https://baike.baidu.com/item/RNA%E7%97%85%E6%AF%92",intro:"RNA病毒是病毒的一种,属于一级。 它们的遗传物质是核糖核酸(RNA ribonucleic acid)。通常其核酸是单链的(ssRNA single-stranded RNA),也有双链的(dsRNA double-stranded RNA)。"},
			//4
    	{name:"2019新型冠状病毒感染肺炎",url:"https://baike.baidu.com/item/%E6%96%B0%E5%9E%8B%E5%86%A0%E7%8A%B6%E7%97%85%E6%AF%92%E8%82%BA%E7%82%8E/24282529?fromtitle=NCP&fromid=24330455",intro:"新型冠状病毒肺炎(Corona Virus Disease 2019,COVID-19),简称“新冠肺炎”,世界卫生组织命名为“2019冠状病毒病”,是指2019新型冠状病毒感染导致的肺炎。"},
			//5
      {name:"糖皮质激素",url:"https://baike.baidu.com/item/%E7%B3%96%E7%9A%AE%E8%B4%A8%E6%BF%80%E7%B4%A0",intro:"糖皮质激素(GC)是机体内极为重要的一类调节分子,它对机体的发育、生长、代谢以及免疫功能等起着重要调节作用,是机体应激反应最重要的调节激素,也是临床上使用最为广泛而有效的抗炎和免疫抑制剂。"},
	    //6
			{name:"药物",image:"https://baike.baidu.com/item/%E8%8D%AF%E7%89%A9/588291",intro:"药物是用以预防、治疗及诊断疾病的物质。在理论上,药物是指凡能影响机体器官生理功能及细胞代谢活动的化学物质都属于药物的范畴,也包括避孕药。"},
      //7
      {name:"传染病科",url:"https://baike.baidu.com/item/%E4%BC%A0%E6%9F%93%E7%97%85%E7%A7%91",intro:"传染病科是治疗传染病的部门。常见传染病有菌痢、伤寒、霍乱、甲型毒性肝炎、流脑、猩红热、百日咳、流感、麻疹、丝虫病、乙型脑炎、血吸虫病等。"},
      //8
      {name:"疾病",url:"hhttps://baike.baidu.com/item/%E7%96%BE%E7%97%85/925932",intro:"疾病(Disease)是一个极其复杂的过程,许多情况下,从健康到疾病是一个由量变到质变的过程。"},
      //9
      {name:"医学病科",url:"",intro:""},
      //10
      {name:"血液检查",url:"https://baike.baidu.com/item/%E8%A1%80%E6%B6%B2%E6%A3%80%E6%9F%A5",intro:"临床血液检测可分为血液一般检测、溶血性贫血的实验室检测、骨髓细胞学检测、血型鉴定与交叉配血试验。可以检测出常见血液病的血液学持征。"},
      //11
      {name:"影像学检查",url:"https://baike.baidu.com/item/%E5%BD%B1%E5%83%8F%E5%AD%A6/7379494",intro:"影像学不仅扩大了人体的检查范围,提高了诊断水平,而且可以对某一些疾病进行治疗。这样,就大大地扩展了本学科的工作内容,并成为医疗工作中的重要支柱。"},
      //12
      {name:"检查科目",url:"",intro:""},
      //13
      {name:"发热",url:"https://baike.baidu.com/item/%E5%8F%91%E7%83%AD/35767",intro:"症状名,正常人在体温调节中枢的调控下,机体的产热和散热过程经常保持动态平衡,当机体在致热源作用下或体温中枢的功能障碍时,使产热过程增加,而散热不能相应地随之增加或散热减少,体温≥37.3℃称为发热。"},
      //14
      {name:"乏力",url:"https://baike.baidu.com/item/%E4%B9%8F%E5%8A%9B",intro:"乏力是临床上最常见的主诉症状之一,属非特异性疲惫感觉。表现为自觉疲劳、肢体软弱无力。生理状态下,乏力在休息或进食后可缓解,而病理性乏力则不能恢复正常。"},
      //15
      {name:"干咳",url:"https://baike.baidu.com/item/%E5%B9%B2%E5%92%B3",intro:"干咳(dry cough)指咳嗽无痰;或痰极少,不易排出的表现。干咳是临床肺部疾病常见症状之一,病因复杂。"},
      //16
      {name:"症状",url:"https://baike.baidu.com/item/%E7%97%87%E7%8A%B6",intro:"疾病过程中机体内的一系列机能、代谢和形态结构异常变化所引起的病人主观上的异常感觉或某些客观病态改变称为症状(symptom)。"}];
		var edges=[{source:0,target:1,relation:"相似病毒"},
				       {source:0,target:2,relation:"属于"},
				       {source:1,target:2,relation:"属于"},
	         	   {source:2,target:3,relation:"子类"},
	         	   {source:0,target:4,relation:"引起"},
	         	   {source:5,target:4,relation:"适用于"}, 
			         {source:5,target:6,relation:"属于"},
			         {source:7,target:4,relation:"治疗"},
			         {source:4,target:8,relation:"属于"}, 
			         {source:7,target:9,relation:"属于"}, 
			         {source:4,target:10,relation:"检测"},
			         {source:4,target:11,relation:"检测"},
			         {source:10,target:12,relation:"检查科目"}, 
			         {source:11,target:12,relation:"检查科目"},  
			         {source:4,target:13,relation:"病症"},
			         {source:4,target:14,relation:"病症"},
			         {source:4,target:15,relation:"病症"},
			         {source:13,target:16,relation:"属于"}, 
			         {source:14,target:16,relation:"属于"},
			         {source:15,target:16,relation:"属于"}
			       ];
			   

					//提示框
		 	var tooltip=d3.selectAll("body")  
                          .append("div")  
               		      .attr("class","tooltip")  
               		      .style("opacity",0.0);  
			var svg=d3.select("body")
					  .append("svg")
					  .attr("width",w)
					  .attr("height",h);
			var force=d3.layout.force()
						.nodes(nodes)
						.links(edges)
						.size([w,h])
						.linkDistance(200)
						.charge(-600)
						.on("tick",tick)
						.start()
			var path=svg.selectAll("path")
						.data(edges)
						.enter()
						.append("path")
						//新增id
						.attr("id",function(d,i){return "edgepath"+i;})
						.attr("stroke","grey");

			var circle=svg.selectAll("circle")
						  .data(nodes)
						  .enter()
						  .append("circle")
						  .attr("r",function (d){return d.weight*3;})
						  .attr("fill",function(d,i){return getColor(i);})
					      .on("mouseover",function(d,i){    //加入提示框
                        tooltip.html("简介:"+d.intro)
                               .style("left",(d3.event.pageX)+"px")  
                               .style("top",(d3.event.pageY+20)+"px")
                               .style("width","220px")
                               .style("font-size","5px")  
                               .style("opacity",1.0);})
						  .call(force.drag);
			var ntext=svg.selectAll("ntext")
						 .data(nodes)
						 .enter()
						 .append("text")
						 .attr("class",".ntext")
						 .style("font-size","15px")
						 .attr("text-anchor","middle")
						 .text(function(d){return d.name});
			var etext=svg.selectAll("etext")
						 .data(edges)
						 .enter()
						 .append("text")
						 .append("textPath")
						 //对应前面的id
						 .attr("xlink:href",function(d,i){return "#edgepath"+i;})
						 .attr("class",".etext")
						 .attr("startOffset","50%")
						 .attr("text-anchor","middle")
						 .style("font-size","10px")
						 .text(function(d){return d.relation});

			function tick(){
				path.attr("d",function(d)
				{
					return "M"+d.source.x+","+d.source.y+"L"+d.target.x+","+d.target.y;
				})
				circle.attr("transform",function(d){
					return "translate("+d.x+","+d.y+")";
				})
				ntext.attr("x",function(d){return d.x;})
					 .attr("y",function(d){return d.y;});

			}
				function getColor(i) {
		var palette = [
				'#94b5cd','#70aace','#1c83b6','#2678b7','#0270ab'
				] 
		return palette[(i+2)%palette.length];
  }
		</script>
<style scoped>
svg {
  border: 1px solid #ccc;
}
div.tooltip {
    position: fixed;
    text-align: center;
    height: auto;
    padding: 2px;
    background: lightsteelblue;
    border: 0px;
    border-radius: 8px;
    pointer-events: none;
}
</style>
	</body>
</html>

主要区别在link和etext部分

基于line的etext的x和y由d.source和d.target的位置决定

<script>
		force.on("tick",function(){
			node.attr("cx",function(d){return d.x;})
			    .attr("cy",function(d){return d.y;})

			link.attr("x1",function(d){return d.source.x;})
			    .attr("y1",function(d){return d.source.y;})
			    .attr("x2",function(d){return d.target.x;})
			    .attr("y2",function(d){return d.target.y;})

			ntext.attr("x",function(d){return d.x;})
			     .attr("y",function(d){return d.y;})

			etext.attr("x",function(d){return (d.source.x+d.target.x)/2})
			     .attr("y",function(d){return (d.source.y+d.target.y)/2})
		})
</script>

基于path的,link由path路径创建

path:SVG中path标签的简单使用_么贺贵的博客-CSDN博客_path标签

<script>
			function tick(){
				path.attr("d",function(d)
				{
					return "M"+d.source.x+","+d.source.y+"L"+d.target.x+","+d.target.y;
				})
				circle.attr("transform",function(d){
					return "translate("+d.x+","+d.y+")";
				})
				ntext.attr("x",function(d){return d.x;})
					 .attr("y",function(d){return d.y;});

			}
</script>

etext通过对应的id绑定在path上 

<script>
			var etext=svg.selectAll("etext")
						 .data(edges)
						 .enter()
						 .append("text")
						 .append("textPath")
						 //对应前面的id
						 .attr("xlink:href",function(d,i){return "#edgepath"+i;})
						 .attr("class",".etext")
						 .attr("startOffset","50%")
						 .attr("text-anchor","middle")
						 .style("font-size","10px")
						 .text(function(d){return d.relation});
</script>

v7版本

基于以上代码改动了一下,是line的。

d3.json().then(function(graph)调用Json文件,绑定节点,绑定边

全部代码:

<html>
	<head>
	<meta charset="utf-8">
		<title>Path力导图v7
		</title>
		<style>
			.node{
				stroke: #fff;
				stroke-width: 1.5px;
			}
			.link{
				stroke: #999;
				stroke-opacity: .6;
			}
		</style>
	</head>
	<body>
		<script src="https://d3js.org/d3.v7.min.js"></script>
		<script>
			var w = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;

			var h = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight; 
			w=w*0.95;
			h=h*0.95;
			var forceSimulation=d3.forceSimulation()
								  .force("link",d3.forceLink())
								  .force("charge",d3.forceManyBody().strength(-100))
								  .force("center",d3.forceCenter(w/2,h/2));
			var svg=d3.select("body")
					  .append("svg")
					  .attr("width",w)
					  .attr("height",h);

			function getColor(i) {
				var palette=[
				'#688db9', '#515696', '#9bbcab', '#d6cea9', '#a74a90',
				'#864d93', '#f1a641', '#f38936', '#ed7975', '#f26862'] 
				return palette[i%palette.length];}

			d3.json("b.json").then(function(graph)
			{
				forceSimulation.nodes(graph.nodes)
							   .on("tick");
				forceSimulation.force("link")
							   .links(graph.links)
							   .distance(200);

			var link=svg.selectAll(".link")
						.data(graph.links)
						.enter()
						.append("line")
						.attr("class","link")
						.style("stroke","grey")
						.style("stroke-width",1);
			var node=svg.selectAll(".node")
						  .data(graph.nodes)
						  .enter()
						  .append("circle")
						  .attr("class","node")
						  .attr("r",15)
						  .attr("fill",function(d,i){return getColor(i);})
						  .call(drag());
			var ntext=svg.selectAll(".ntxt")
						 .data(graph.nodes)
						 .enter()
						 .append("text")
						 .attr("class","ntxt")
						 .style("font-size","10px")
						 .attr("dx","-2em")
						 .attr("dy","2em")
						 .text(function(d){return d.name});
			var etext=svg.selectAll(".etxt")
						 .data(graph.links)
						 .enter()
					   	 .append("text")
						 .attr("class","etxt")
						 .style("font-size","10px")
						 .text(function(d){return d.relation;});

			forceSimulation.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);
				ntext.attr("x",d=>d.x)
					 .attr("y",d=>d.y);
				etext.attr("x",function(d){return (d.source.x+d.target.x)/2})
			     .attr("y",function(d){return (d.source.y+d.target.y)/2})

			});

			function drag()
			{

   			 function dragstarted(event, d) {
      			if (!event.active) forceSimulation.alphaTarget(0.3).restart();
      			d.fx = d.x;
      			d.fy = d.y;
				}
			 function dragged(event, d) {
      			d.fx = event.x;
     			d.fy = event.y;
   				}

    		 function dragended(event, d) {
     		 if (!event.active) forceSimulation.alphaTarget(0);
     		 d.fx = null;
     		 d.fy = null;
  			  }
  			  return d3.drag()
  			  		   .on("start",dragstarted)
  			  		   .on("drag",dragged)
  			  		   .on("end",dragended);
			}
						});
		</script>
	</body>
</html>

其中b.json如下:

(一定要注意删去之前的注释!!!然后"name""url"等等要带双引号)

{"nodes":
	[
	{"name":"2019新型冠状病毒","url":"https://baike.baidu.com/item/2019%E6%96%B0%E5%9E%8B%E5%86%A0%E7%8A%B6%E7%97%85%E6%AF%92","intro":"2019新型冠状病毒(2019-nCoV,世卫组织2020年1月命名;SARS-CoV-2,国际病毒分类委员会2020年2月11日命名)。"},
 	{"name":"SARS冠状病毒","url":"https://baike.baidu.com/item/SARS%E7%97%85%E6%AF%92","intro":"SARS病毒属于套式病毒目、冠状病毒科、冠状病毒属,为β属B亚群冠状病毒。病毒粒子多呈圆形,有囊膜,外周有冠状排列的纤突,分布于细胞浆中,呈圆形,病毒直径在80~120nm之间。"},
 	{"name":"冠状病毒","url":"https://baike.baidu.com/item/%E5%86%A0%E7%8A%B6%E7%97%85%E6%AF%92","intro":"冠状病毒在系统分类上属套式病毒目(Nidovirales)冠状病毒科(Coronaviridae)冠状病毒属(Coronavirus)。冠状病毒属的病毒是具囊膜(envelope)、基因组为线性单股正链的RNA病毒,是自然界广泛存在的一大类病毒。"},
  	{"name":"RNA病毒","url":"https://baike.baidu.com/item/RNA%E7%97%85%E6%AF%92","intro":"RNA病毒是病毒的一种,属于一级。 它们的遗传物质是核糖核酸(RNA ribonucleic acid)。通常其核酸是单链的(ssRNA single-stranded RNA),也有双链的(dsRNA double-stranded RNA)。"},
    {"name":"2019新型冠状病毒感染肺炎","url":"https://baike.baidu.com/item/%E6%96%B0%E5%9E%8B%E5%86%A0%E7%8A%B6%E7%97%85%E6%AF%92%E8%82%BA%E7%82%8E/24282529?fromtitle=NCP&fromid=24330455","intro":"新型冠状病毒肺炎(Corona Virus Disease 2019,COVID-19),简称“新冠肺炎”,世界卫生组织命名为“2019冠状病毒病”,是指2019新型冠状病毒感染导致的肺炎。"},
    {"name":"糖皮质激素","url":"https://baike.baidu.com/item/%E7%B3%96%E7%9A%AE%E8%B4%A8%E6%BF%80%E7%B4%A0","intro":"糖皮质激素(GC)是机体内极为重要的一类调节分子,它对机体的发育、生长、代谢以及免疫功能等起着重要调节作用,是机体应激反应最重要的调节激素,也是临床上使用最为广泛而有效的抗炎和免疫抑制剂。"},
	{"name":"药物","image":"https://baike.baidu.com/item/%E8%8D%AF%E7%89%A9/588291","intro":"药物是用以预防、治疗及诊断疾病的物质。在理论上,药物是指凡能影响机体器官生理功能及细胞代谢活动的化学物质都属于药物的范畴,也包括避孕药。"},
    {"name":"传染病科","url":"https://baike.baidu.com/item/%E4%BC%A0%E6%9F%93%E7%97%85%E7%A7%91","intro":"传染病科是治疗传染病的部门。常见传染病有菌痢、伤寒、霍乱、甲型毒性肝炎、流脑、猩红热、百日咳、流感、麻疹、丝虫病、乙型脑炎、血吸虫病等。"},
    {"name":"疾病","url":"hhttps://baike.baidu.com/item/%E7%96%BE%E7%97%85/925932","intro":"疾病(Disease)是一个极其复杂的过程,许多情况下,从健康到疾病是一个由量变到质变的过程。"},
    {"name":"医学病科","url":"","intro":""},
    {"name":"血液检查","url":"https://baike.baidu.com/item/%E8%A1%80%E6%B6%B2%E6%A3%80%E6%9F%A5","intro":"临床血液检测可分为血液一般检测、溶血性贫血的实验室检测、骨髓细胞学检测、血型鉴定与交叉配血试验。可以检测出常见血液病的血液学持征。"},
    {"name":"影像学检查","url":"https://baike.baidu.com/item/%E5%BD%B1%E5%83%8F%E5%AD%A6/7379494","intro":"影像学不仅扩大了人体的检查范围,提高了诊断水平,而且可以对某一些疾病进行治疗。这样,就大大地扩展了本学科的工作内容,并成为医疗工作中的重要支柱。"},
    {"name":"检查科目","url":"","intro":""},
    {"name":"发热","url":"https://baike.baidu.com/item/%E5%8F%91%E7%83%AD/35767","intro":"症状名,正常人在体温调节中枢的调控下,机体的产热和散热过程经常保持动态平衡,当机体在致热源作用下或体温中枢的功能障碍时,使产热过程增加,而散热不能相应地随之增加或散热减少,体温≥37.3℃称为发热。"},
    {"name":"乏力","url":"https://baike.baidu.com/item/%E4%B9%8F%E5%8A%9B","intro":"乏力是临床上最常见的主诉症状之一,属非特异性疲惫感觉。表现为自觉疲劳、肢体软弱无力。生理状态下,乏力在休息或进食后可缓解,而病理性乏力则不能恢复正常。"},
    {"name":"干咳","url":"https://baike.baidu.com/item/%E5%B9%B2%E5%92%B3","intro":"干咳(dry cough)指咳嗽无痰;或痰极少,不易排出的表现。干咳是临床肺部疾病常见症状之一,病因复杂。"},
    {"name":"症状","url":"https://baike.baidu.com/item/%E7%97%87%E7%8A%B6","intro":"疾病过程中机体内的一系列机能、代谢和形态结构异常变化所引起的病人主观上的异常感觉或某些客观病态改变称为症状(symptom)。"}
	],
"links":
	[
					{"source":0,"target":1,"relation":"相似病毒"},
				    {"source":0,"target":2,"relation":"属于"},
				    {"source":1,"target":2,"relation":"属于"},
	         	    {"source":2,"target":3,"relation":"子类"},
	         	    {"source":0,"target":4,"relation":"引起"},
	         	    {"source":5,"target":4,"relation":"适用于"}, 
			        {"source":5,"target":6,"relation":"属于"},
			        {"source":7,"target":4,"relation":"治疗"},
			        {"source":4,"target":8,"relation":"属于"}, 
			        {"source":7,"target":9,"relation":"属于"}, 
			        {"source":4,"target":10,"relation":"检测"},
			        {"source":4,"target":11,"relation":"检测"},
			        {"source":10,"target":12,"relation":"检查科目"}, 
			        {"source":11,"target":12,"relation":"检查科目"},  
			        {"source":4,"target":13,"relation":"病症"},
			        {"source":4,"target":14,"relation":"病症"},
			        {"source":4,"target":15,"relation":"病症"},
			        {"source":13,"target":16,"relation":"属于"}, 
			        {"source":14,"target":16,"relation":"属于"},
			        {"source":15,"target":16,"relation":"属于"}
	]
}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值