java Struts + JQuery +d3.js 动态生成一个简单的拓扑图

最新推荐文章于 2024-10-04 11:06:27 发布

灵峰

最新推荐文章于 2024-10-04 11:06:27 发布

阅读量7.7k

点赞数 4

分类专栏： java Struts + JQuery +d3.js 动态生成一个简单的拓扑图 html5+JQM+js 文章标签： WEB 图形

本文链接：https://blog.csdn.net/linfen1680/article/details/46913463

版权

本文介绍了如何使用Java、Struts、JQuery和d3.js库动态生成一个可拖拽的拓扑图。首先展示了最终效果，然后详细讲解了从定义数据模型（包括NodeLink、Link和Node类）、生成JSON数据到前端利用d3.js展示拓扑图的步骤。关键代码已给出，并对需要注意的部分进行了注释。

摘要由CSDN通过智能技术生成

先贴图，看效果

这个图形可拖拽,是用的d3.js前台控件，之前网友做的东西，稍稍改了下，准确的说也就是数据动态加载了，以前是前台写死的数据。

先把之前网友的代码贴出来

页面代码

</pre><pre name="code" class="javascript"><!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="d3.js"></script>
<style type="text/css">
.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;
}
</style>
</head>
<body>
<div id='container'></div>
<script type="text/javascript">

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("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; });
    });
}


Topology.prototype.doZoom=function(){
    d3.select(this).select('g').attr("transform","translate(" + d3.event.translate + ")"+ " scale(" + d3.event.scale + ")");
}


//增加节点
Topology.prototype.addNode=function(node){
    this.nodes.push(node);
}

Topology.prototype.addNodes=function(nodes){
    if (Object.prototype.toString.call(nodes)=='[objec