d3.js画金庸小说力导向图

以《连城诀》为例：
结果图：

人物和关系如下：

.nodetext {font-size: 18px ;font-family: SimSun;fill:#000000;
}.linetext {font-size:18px ;font-family: SimSun;fill:#0000FF;fill-opacity:0.0;
}
</style><script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script><script>var nodes = [{"name":"狄云"},{"name":"丁典"},{"name":"戚长发"},{"name":"戚芳"},{"name":"万震山"},{"name":"血刀老祖"},{"name":"凌霜华"},{"name":"凌退思"},{"name":"空心菜"},{"name":"万圭"},{"name":"水笙"},{"name":"梅念笙"},{"name":"言达平"}]var edges = [{"source":0, "target":1,  "relation":"义兄弟"},{"source":0, "target":2,  "relation":"师徒"},{"source":0, "target":3,  "relation":"初恋"},{"source":0, "target":5,  "relation":"师徒"},{"source":0, "target":10,  "relation":"相爱"},{"source":1, "target":6,  "relation":"相爱"},{"source":1, "target":7,  "relation":"被毒杀"},{"source":1, "target":11,  "relation":"师徒"},{"source":2, "target":11,  "relation":"师徒"},{"source":4, "target":11,  "relation":"师徒"},{"source":2, "target":3,  "relation":"父女"},{"source":3, "target":9,  "relation":"夫妻"},{"source":3, "target":8,  "relation":"母女"},{"source":4, "target":9,  "relation":"父子"},{"source":6, "target":7,  "relation":"父女"},{"source":11, "target":12,  "relation":"师徒"},{"source":12, "target":0,  "relation":"利用"}]

svg画图

     var width = 1366var height = 692var svg = d3.select("body").append("svg").attr("width",width).attr("height",height)var force = d3.layout.force().nodes(nodes) //指定节点数组.links(edges)  //指定连线数组.size([width,height])  //指定范围.linkDistance(150)  //指定连线长度.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)var color = d3.scale.category20()var svg_nodes = svg.selectAll("circle").data(nodes).enter().append("circle").attr("r",20).style("fill",function(d,i){return color(i)}).on("mouseover",function(d,i){//显示连接线上的文字edges_text.style("fill-opacity",function(edge){if( edge.source === d || edge.target === d ){return 1.0;}});}).on("mouseout",function(d,i){//隐去连接线上的文字edges_text.style("fill-opacity",function(edge){if( edge.source === d || edge.target === d ){return 0.0;}});}).call(force.drag);var svg_texts = svg.selectAll(".nodetext").data(nodes).enter().append("text").style("fill","black").attr("class","nodetext").attr("dx",-15).attr("dy",-25).text(function(d){return d.name})var edges_text = svg.selectAll(".linetext").data(edges).enter().append("text").style("fill","blue").attr("class","linetext").text(function(d){return d.relation;});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})edges_text.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>

d3.js画金庸小说力导向图相关推荐

D3.js的v5版本入门教程（第十四章）—— 力导向图
D3.js的v5版本入门教程(第十四章) 这一章我们来绘制一个力导向图,什么叫力导向图,通俗一点将就是有节点和线组成,当鼠标拖拽一个节点时,其他节点都会受到影响(力导向图有多种类型,本章绘制的效果就是 ...
D3.js 力导向图来处理拓扑图
记录一点碰到的问题和解决方案.感觉国内关于D3.js 4.0版本的相关资料还是少. 力导向图布局 D3一种布局的方式,可以将你nodes links的节点数据转换成可以绘制的坐标点数据,然后通过svg ...
利用D3.js快速绘制力导向图
碎碎念: 最近课题需要基于图论和力导向图可视化每个脑电通道之间的连接性,MATLAB画的效果差强人意,于是上网搜寻到JavaScript 的一个函数库--D3.js,想快速得到数据的可视化结果简介D ...
使用d3.js开发力导向图
最近项目需要写一个d3的力导向图,之前没接触过d3.js 所以吧这次开发的经历写一下文章目录分配点与线创建dom 线点绘制线友情提示:不要让设计设计的华丽呼哨,点多了很卡,而且svg 有些 ...
d3.js实现力导向图圈选框选
#d3.js实现力导向图圈选框选今天给大家带来的是如何在2D可视化图形中加入通过鼠标拖动圈选功能,以力导向图为例. ##最终效果 demo跳转 ##代码解析我们是要在节点的上方绘制一个矩形覆盖节点 ...
d3力导向图增加节点_d3.js力导向图节点如何都显示在边框内
最近用到d3.js中的force力导向图,想实现效果如下,所有城市节点都在可视范围内,如果超出有滚动条也可以. 遇到的问题是,当节点一多,有的节点就会跑到外面去,这边是通过加大charge相互作用力, ...
D3.js 力导向图的显示优化
D3.js 作为一个前端,说到可视化除了听过 D3.js 的大名,常见的可视化库还有 ECharts.Chart.js,这两个库功能也很强大,但是有一个共同特点是封装层次高,留给开发者可设计和控制的部 ...
D3.js实现力导向图(Dray和Zoom)
今天遇到个问题就是把json(里面nodes和edges属性)文件通过D3.js展示出来,下午终于弄出来了,写篇博客记录一下. 先展示一下效果图: 放大后是这个效果: 什么是力导向图 D3.js官网: ...
d3 svg path添加文本_D3.js 力导向图的显示优化
D3.js 作为一个前端,说到可视化除了听过 D3.js 的大名,常见的可视化库还有 ECharts.Chart.js,这两个库功能也很强大,但是有一个共同特点是封装层次高,留给开发者可设计和控制的部 ...

d3.js画金庸小说力导向图

d3.js画金庸小说力导向图相关推荐

最新文章

热门文章