python实现点线拓扑图_d3.js实现简单的网络拓扑图实例代码

前言

了解了D3.js的基本开发和组件以后，我们开始应用它激动人心之处：绚丽的预定义图形，应用D3.js，我们在它的示例文件的基础上稍加变动即可应用于我们的数据可视化工作中，D3.js将后台的运算已经预定义好，我们只需少量代码和规范的数据，就能做出很花哨(请原谅我的用词不当)的效果。

力学图(也称为导向图，也有叫网络拓补图的，反正就是通过排斥得到关系远近的结构)在社交网络研究、信息传播途径等群体关系研究中应用非常广泛，它可以直观地反映群体与群体之间联系的渠道、交集多少，群体内部成员的联系强度等。

本文实现如下面的效果(用非IE浏览器可以看到效果)：

代码有点长，但是也不复杂，可以参考如下代码：

.link { stroke: green; stroke-linejoin:bevel;}

.link_error{

stroke:red;

stroke-linejoin:bevel;

}

.nodetext {

font: 12px sans-serif;

-webkit-user-select:none;

-moze-user-select:none;

stroke-linejoin:bevel;

}

#container{

width:800px;

height:600px;

border:1px solid gray;

border-radius:5px;

position:relative;

margin:20px;

}

function Topology(ele){

typeof(ele)=='string' && (ele=document.getElementById(ele));

var w=ele.clientWidth,

h=ele.clientHeight,

self=this;

this.force = d3.layout.force().gravity(.05).distance(200).charge(-800).size([w, h]);

this.nodes=this.force.nodes();

this.links=this.force.links();

this.clickFn=function(){};

this.vis = d3.select(ele).append("svg:svg")

.attr("width", w).attr("height", h).attr("pointer-events", "all");

this.force.on("tick", function(x) {

self.vis.selectAll("g.node")

.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });

self.vis.selectAll("line.link")

.attr(&#