力导向图知识图谱可视化（节点可点击）
来源：互联网 发布：成都市文化馆网络报名 编辑：程序博客网 时间：2024/06/03 21:24
用d3.js的力导向图写了一个知识图谱可视化的demo，节点可点击着实费了我不少功夫，如果小伙伴有更简单的方法还求留言呢~
由于数据市实验室的某项目，不太好直接贴出来，反正这样的格式就好：反正是给大家参考的~
{ name: "name", type: 0 }<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>专题服务</title> <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> <style type="text/css"> </style></head><body><div id="main" name="main"> <div id="image"></div></div><script> var nodes = [这里是数据]; var edges = [ { source : 0 , target: 1, rel:1 } , { source : 0 , target: 2 , rel:1} , { source : 0 , target: 3, rel:1 } , { source : 0 , target: 4 , rel:1} , { source : 0 , target: 5, rel:1 } , { source : 0 , target: 6 , rel:1}, { source : 0 , target: 7, rel:1 } , { source : 0 , target: 8, rel:1 }, { source : 0 , target: 9, rel:1 } , { source : 0 , target: 10, rel:1 }, { source : 0 , target: 11, rel:1 } , { source : 0 , target: 12 , rel:1}, {source: 2, target: 13, rel:2}, {source: 2, target: 14, rel:2}, {source: 2, target: 15, rel:2}, {source: 2, target: 16, rel:2}, {source: 2, target: 17, rel:2}, {source: 14, target: 18, rel:3}, {source: 14, target: 19, rel:3}, {source: 14, target: 20, rel:3}, {source: 15, target: 21, rel:4}, {source: 15, target: 22, rel:4}, {source: 13, target: 23, rel:5}, {source: 13, target: 24, rel:5}, {source: 13, target: 25, rel:5}, {source: 13, target: 26, rel:5}, {source: 13, target: 27, rel:5},{source: 16, target: 28, rel:6}, {source: 16, target: 29, rel:6}, {source: 16, target: 30, rel:6}, {source: 16, target: 31, rel:6}, {source: 16, target: 32, rel:6},{source: 17, target: 33, rel:7}, {source: 17, target: 34, rel:7}, {source: 17, target: 35, rel:7} ]; var width = 1000; var height = 800; var svg = d3.select("body") .append("svg") .attr("width",width) .attr("height",height); var force = d3.layout.force() .nodes(nodes)//指定节点数组 .links(edges)//指定连线数组 .size([width-20,height-20])//指定范围 .charge(-300) .theta(0.2) .linkDistance(function(d, i){ //console.log(d); if(edges[i].rel==1){ return 180; }else if(edges[i].rel==2){ return 150; }else{ return 100; } }) .charge(-400);//相互之间的作用力 force.start();//开始作用 //console.log(nodes); //console.log(edges); //添加连线 var svg_edges = svg.selectAll("line") .data(edges) .enter() .append("line") .style("stroke","#ccc") .style("stroke-width",1) .attr("opacity", function(d,i){ if(edges[i].rel=="1"){ return 1.0; }else{ return 0.0; } }); //添加节点 var svg_nodes = svg.selectAll("circle") .data(nodes) .enter() .append("circle") .attr("r",20) .style("fill", function (d,i){if(nodes[i].type=="0"){ return "#B2A4DA"; }else if(nodes[i].type=="1"){ return "#6EB0EA"; }else if(nodes[i].type=="2"){ return "#90E4EA"; }else{ return "#A8EAA7" } }) .attr("opacity", function(d,i){ if(nodes[i].type=="1"||nodes[i].type=="0"){ return 1.0; }else{ return 0.0; } }) .call(force.drag) .on("click", function(d,i){ //围产医学 if(nodes[i].name=="围产医学") { svg.selectAll("circle") .attr("opacity",function(d,i){ if(nodes[i].type=="2"||nodes[i].type=="1"||nodes[i].type=="0"){ return 1.0; }else{ return 0; } }); svg.selectAll("text") .attr("opacity", function(d,i){ if(nodes[i].type=="2"||nodes[i].type=="1"||nodes[i].type=="0"){ return 1.0; }else{ return 0; } }); svg.selectAll("line").attr("opacity", function(d,i){ if(edges[i].rel=="2"||edges[i].rel=="1"){ return 1.0; }else{ return 0; } }); } //母婴传播 else if(nodes[i].name=="母婴传播") { svg.selectAll("circle") .attr("opacity",function(d,i){ if(nodes[i].type=="3"||nodes[i].type=="2"||nodes[i].type=="1"||nodes[i].type=="0"){ return 1.0; }else{ return 0; } }); svg.selectAll("text") .attr("opacity", function(d,i){ if(nodes[i].type=="3"||nodes[i].type=="2"||nodes[i].type=="1"||nodes[i].type=="0"){ return 1.0; }else{ return 0; } }); svg.selectAll("line").attr("opacity", function(d,i){ if(edges[i].rel=="3"||edges[i].rel=="2"||edges[i].rel=="1"){ return 1.0; }else{ return 0; } }); } //生殖遗传 else if(nodes[i].name=="生殖遗传") { svg.selectAll("circle") .attr("opacity",function(d,i){ if(nodes[i].type=="4"||nodes[i].type=="2"||nodes[i].type=="1"||nodes[i].type=="0"){ return 1.0; }else{ return 0; } }); svg.selectAll("text") .attr("opacity", function(d,i){ if(nodes[i].type=="4"||nodes[i].type=="2"||nodes[i].type=="1"||nodes[i].type=="0"){ return 1.0; }else{ return 0; } }); svg.selectAll("line").attr("opacity", function(d,i){ if(edges[i].rel=="4"||edges[i].rel=="2"||edges[i].rel=="1"){ return 1.0; }else{ return 0; } }); } //慢性疾病与生育风险 else if(nodes[i].name=="慢性疾病与生育风险") { svg.selectAll("circle") .attr("opacity",function(d,i){ if(nodes[i].type=="5"||nodes[i].type=="2"||nodes[i].type=="1"||nodes[i].type=="0"){ return 1.0; }else{ return 0; } }); svg.selectAll("text") .attr("opacity", function(d,i){ if(nodes[i].type=="5"||nodes[i].type=="2"||nodes[i].type=="1"||nodes[i].type=="0"){ return 1.0; }else{ return 0; } }); svg.selectAll("line").attr("opacity", function(d,i){ if(edges[i].rel=="5"||edges[i].rel=="2"||edges[i].rel=="1"){ return 1.0; }else{ return 0; } }); } //妊娠期疾病 else if(nodes[i].name=="妊娠期疾病") { svg.selectAll("circle") .attr("opacity",function(d,i){ if(nodes[i].type=="6"||nodes[i].type=="2"||nodes[i].type=="1"||nodes[i].type=="0"){ return 1.0; }else{ return 0; } }); svg.selectAll("text") .attr("opacity", function(d,i){ if(nodes[i].type=="6"||nodes[i].type=="2"||nodes[i].type=="1"||nodes[i].type=="0"){ return 1.0; }else{ return 0; } }); svg.selectAll("line").attr("opacity", function(d,i){ if(edges[i].rel=="6"||edges[i].rel=="2"||edges[i].rel=="1"){ return 1.0; }else{ return 0; } }); } //妊娠结局 else if(nodes[i].name=="妊娠结局") { svg.selectAll("circle") .attr("opacity",function(d,i){ if(nodes[i].type=="7"||nodes[i].type=="2"||nodes[i].type=="1"||nodes[i].type=="0"){ return 1.0; }else{ return 0; } }); svg.selectAll("text") .attr("opacity", function(d,i){ if(nodes[i].type=="7"||nodes[i].type=="2"||nodes[i].type=="1"||nodes[i].type=="0"){ return 1.0; }else{ return 0; } }); svg.selectAll("line").attr("opacity", function(d,i){ if(edges[i].rel=="7"||edges[i].rel=="2"||edges[i].rel=="1"){ return 1.0; }else{ return 0; } }); } });//使得节点能够拖动 //添加描述节点的文字 var svg_texts = svg.selectAll("text") .data(nodes) .enter() .append("text") .style("fill", "black") .attr("dx", -50) .attr("dy", 30) .attr("font-size", 12) .attr("opacity", function(d,i){ if(nodes[i].type=="1"){ return 1.0; }else{ return 0.0; } }) .text(function(d){ return d.name; }); force.on("tick", function(){//对于每一个时间间隔 //更新连线坐标 svg_edges.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; }); //更新节点坐标 svg_nodes.attr("cx",function(d){ return d.x; }) .attr("cy",function(d){ return d.y; }); //更新文字坐标 svg_texts.attr("x", function(d){ return d.x; }) .attr("y", function(d){ return d.y; }); });</script></body></html>阅读全文
0 0
- 力导向图知识图谱可视化（节点可点击）
- D3 force(力导向图)研究之二：如何布局超过十万个节点的图谱
- 星战知识图谱可视化
- 【D3.js数据可视化系列教程】（二十四）--力导向图
- 【D3.js数据可视化系列教程】（三十）--力导向图之带文字
- 【D3.js数据可视化系列教程】（三十一）-- 力导向图之分子式
- 【D3.js数据可视化系列教程】（三十二）-- 力导向图之弧形箭头连线
- 【D3.js数据可视化系列教程】（三十三）-- 力导向图之图片和提示
- 数据可视化 D3.js实现力导向图之二（node带文字说明和提示）
- 【数据可视化】可放缩可拖拽画布的力导向图
- 潜龙（CHLoong）可视化图谱
- Echarts Force力导向图实现节点可折叠
- 数据可视化 D3.js实现力导向图之一（实现按指定字段确定link的source和target）
- ECharts--基于力导向布局图功能更完善的人物关系图插件扩展-节点样式和点击事件2
- 知识导向
- 前端数据可视化插件（二）图谱
- 前端数据可视化插件（二）图谱
- 知识图谱（knowledge graph）
- JavaScript 获取对象属性和方法
- Masonry 对于block内部引用self会不会造成循环引用？
- leetcode--10. Regular Expression Matching
- 多场景业务建模系统
- SuperMap iDesktop9D 3DDesinger模块功能介绍（一）
- 力导向图知识图谱可视化（节点可点击）
- 欢迎使用CSDN-markdown编辑器
- accelerated c++ 1.2
- 【java学习】JSP（Java Server Pages)
- Flask 设置cookie的两种方法.获取cookie,和删除cookie的方法(修改过期时间)
- IntelliJ Idea 常用快捷键列表
- Git入门之安装、配置
- Java8 时间插件 测试参考
- 4用于cifar10的卷积神经网络-4.18sigmoid激活函数的输出汇总分析
