16被浏览1705分享邀请回答03 条评论分享收藏感谢收起Html+js实现拓扑图，求思路！
18:35:59 +08:00 · 16670 次点击
有这样一个需求，要实现一个简单的拓扑图，大体类似于星型网络图。想用纯html和js去实现，求一个思路。我现在想到的有：1.用canvas画，可canvas就是一个画布，不能节点内容中添加链接等功能，它内部不支持HTML标签2.用div来表示每一个节点，这种方式最好，便于对节点内容做样式控制还可以在节点里面添加超链接，但是div怎么任意摆放并实现连线，线上还有label的功能就没有思路了。各位前端大师和经验丰富的v2exer，能否提供一个思路呢，感谢！
9 回复 &| &直到
08:00:00 +08:00
& & 18:42:15 +08:00
& & 18:47:16 +08:00
& & 18:49:12 +08:00
需要画图同时绑定节点事件的话，你需要的是 SVG 而不是 canvas，推荐楼主看一下 raphael.js
。其 API 设计非常优秀，而且十分容易上手。
& & 19:34:51 +08:00
看了这个你会被震撼到, 不过是商业的：
推荐这个, 基于SVG/VML做了一层封装:
& & 07:28:54 +08:00
这玩意不是早就有了么？neo2j就用了。
& & 07:32:44 +08:00
打错字了。是neo4j的web端。但不记得它用的什么库了。楼主可以装一个看看。
& & 10:15:15 +08:00
身边有同学提过这个, 她找到了 d3 模块可以用来话, 貌似有用
& & 13:56:54 +08:00
这个做过。
raphael.js 画SVG
有必要的时候再加一些DIV配合。
& & 14:29:11 +08:00
我也非常想找个能很容易实现画一个有向无环图的东西。
要求能够在节点和连线上绑事件的。
之前找到的几个，不过没时间研究，也就一直没做成：
& · & 734 人在线 & 最高记录 3541 & · &
创意工作者们的社区
World is powered by solitude
VERSION: 3.9.8.0 · 59ms · UTC 23:43 · PVG 07:43 · LAX 15:43 · JFK 18:43? Do have faith in what you're doing.在 SegmentFault，解决技术问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
一线的工程师、著名开源项目的作者们，都在这里：
获取验证码
已有账号？
标签：至少1个，最多5个
拓扑图编辑器介绍
拓扑图编辑器项目 - Graph.Editor 正式发布到github了，欢迎访问、提取和贡献代码
项目地址：
在线演示：
Graph.Editor是一款基于HTML5技术的拓补图编辑器，采用jquery插件的形式，是Qunee图形组件的扩展项目，旨在提供可供扩展的拓扑图编辑工具， 拓扑图展示、编辑、导出、保存等功能，此外本项目也是学习HTML5开发，构建WebAPP项目的参考实例。
数据可视化是一件有趣的工作，冰冷的数据变成美观的图形，如同命令行之于Mac OS X图形界面的，传统的图形组件以图表（Chart）居多，不少优秀的开源或者商业的作品，
比如d3js, echarts, highcharts，而拓扑图、流程图组件相对少一些，知名的有yfiles，本项目则基于Qunee图形组件，是Qunee的扩展项目，旨在为客户提供可供扩展的拓扑图编辑工具，
提供拓扑图展示、编辑、导出、保存等功能，此外本项目也是学习HTML5开发，构建WebAPP项目的参考实例。
注意：本项目内核使用Qunee for HTML5，Qunee本身是一个商业产品，默认仅限本机（localhost）使用，非商业用途可以申请免费授权，商业用途请购买相应授权，官网：
在线演示：
请访问此地址查看效果：
Hello Graph.Editor
&!DOCTYPE html&
&meta charset="UTF-8"&
&title&Hello Qunee&/title&
&link rel=stylesheet href=/editor/libs/bootstrap/css/bootstrap.css&
&link rel=stylesheet href=/editor/libs/graph.editor/graph.editor.css&
&body class="layout"&
&div id="editor" data-options="region:'center'"&&/div&
&script src="/editor/libs/js.js"&&/script&
&script src="/lib/qunee-min.js?v=1.8"&&/script&
&script src="/editor/libs/graph.editor/graph.editor.js"&&/script&
$('#editor').graphEditor({callback: function(editor){
var graph = editor.
var hello = graph.createNode("Hello", -100, -50);
hello.image = Q.Graphs.
var qunee = graph.createNode("Qunee", 100, 50);
var edge = graph.createEdge("Hello\nQunee", hello, qunee);
graph.moveToCenter();
编辑器的基本示例相比Hello Qunee要复杂些，除了类库外，还用到了一些第三方组件：, , ,
此外就是自身的类库，这里我们引用在线的js和css
实际代码部分，采用了jquery的写法，如下:
$('#editor').graphEditor({
callback: 回调函数,
data: json数据地址,
images: 拖拽图标信息
本例中，通过回调函数获取editor.graph对象，并创建了两个节点和一条连线
更多用法请查看其他demo和代码
项目用到nodejs，使用bower包管理，用到Gulp相关的插件打包和发布
本项目使用以下工具：
安装nodejs
安装bower - 包管理
安装Gulp - 任务自动管理工具
开始开发环境
切换到项目目录，然后运行下面的命令，完成开发环境的安装
npm install
前端第三方包
用到, , ，使用bower下载这些包到bower_components目录
bower install
项目主要代码在app目录，其中脚本代码在app/src/内，
编辑器扩展插件
--Exportpane.js 图片导出模块
--JSONSerializer.js
数据序列化模块
--PopupMenu.js
右键菜单模块
--Toolbar.js
工具栏模块
--graph.editor.js
拓扑图编辑器插件
--graph.editor.css
--scripts/
--index.html
编辑器主页面
--demo.html
编辑器插件示例
dist/ 输出目录
bower_components/ bower第三方包目录，运行bower install 后自动生成
node_modules/ 开发环境相关包目录，运行npm install后自动生成
输出目录结构
bootstrap/
第三方类库bootstrap样式和资源目录
graph.editor/
graph.editor类库
graph.editor.css
graph.editor.js
第三方类库（jquery, bootstrap, layout.border）
index.html
编辑器主要的类库文件位于libs/graph.editor/, 第三方类库（jquery, bootstrap, layout.border）位于libs/js.js，bootstrap样式和资源目录位于libs/bootstrap/
6 收藏&&|&&21
你可能感兴趣的文章
1 收藏，1.7k
4 收藏，3.2k
分享到微博？
我要该，理由是：　　SVG 是一种很好的
技术方案，可以用来创建互动，在任何大小的屏幕上都会很好看、与分辨率无关的矢量图形。而这里推荐的 Snap.svg 这个&JavaScript 可以让你像& 操作 DOM 一样操作 SVG 资源。
　　Snap.svg 是专为现代浏览器打造，支持剪裁，遮罩，纹理，渐变，分组等功能。凭借丰富的动画库和易于的事件处理，Snap.svg 可以帮助你轻松实现 SVG 功能。
您可能感兴趣的相关文章
您可能感兴趣的相关文章
本文链接：
编译来源：
阅读(...) 评论()还在用Visio画计算机网络拓扑图?你应该看看这款软件了!
计算机网络拓扑图是用来表示计算机组成中网络之间设备的分布情况以及连接状态的。在计算机网络设计中，网络拓扑结构的设计也显得尤为重要，其中第一个需要解决的就是在给定计算机的位置，并且保证一定的网络响应时间、吞吐量以及可靠性的条件下，再通过选择适当的路线、线路容量以及连接方式等，使整个网络结构合理并耗费最低的成本。
在绘制网络拓扑图时，不管是局域网还是广域网，拓扑绘图的选择也要考虑到很多要素。那么，在常见的几种结构类型中，应该如何选择呢?
1、星型拓扑结构：是由中央节点和通过点到点通信链路接到中央节点的各个站点组成。
优点：集中控制，结构简单灵活、建网容易，便于控制和管理，故障诊断和隔离比较容易。
缺点：是中央结点负担较重，容易形成系统的“瓶颈”，线路的利用率也不高。
2、总线拓扑结构：是由一条高速主干电缆也就是总线跟若干节点进行连接而成的网络形式。总线拓扑是使用最普遍的一种网络。
优点：结构简单灵活，易于扩充，布线容易，使用方便，性能较好。
缺点：总线的传输距离有限，通信范围受到限制，而且总线故障将对整个网络产生影响。
3、环型拓扑结构：环型拓扑网络由站点和连接站的链路组成一个闭合环，其信息的传送是单向的，所以每个节点需要安装中继器，以此来接收、放大、发送信号。 环型拓扑是局域网常采用的拓扑结构之一。
优点：结构简单，建网容易，传输距离远，便于管理。
缺点：当结点过多时，将影响传输效率，不利于扩充，故障检测也比较困难。
4、树型拓扑结构：树型拓扑从总线拓扑演变而来，形状像一棵倒置的树，顶端是树根，树根以下带分支，每个分支还可再带子分支。 树形拓扑结构是当前网络系统集成工程中最常见的一种结构。
优点：扩充方便、灵活，成本低，易推广，适合于分主次或分等级的层次型管理系统。
缺点：资源共享能力较低，可靠性不高，而且各个节点对根的依赖性太大。
5、混合型拓扑结构：是由星型结构或环型结构和总线型结构结合在一起的网络结构。
优点：可以对网络的基本拓扑取长补短。
缺点：网络配置挂包时难度较大。
6、网状型拓扑结构：主要是指各节点通过传输线互联连接起来，并且每一个节点至少与其他两个节点相连。
优点：由于结点之间有多条线路相连，所以网络的可靠性较高。
缺点：由于结构比较复杂，建设成本较高，而且不易扩充。
其实，目前在很多专业的绘图软件中，不乏有许多外观漂亮、型号多样的产品外观图，而且还提供了圆滑的曲线、斜向文字标注，以及各种特殊的箭头和线条绘制工具。当然，亿图图示专家，作为国产软件中仅有的一款可与Visio相媲美，甚至可以取代Visio的全类型图形图表设计软件，在绘制计算机网络拓扑时又有哪些优势呢?
亿图网络拓扑图符号：
亿图图示软件模板、例子：
亿图图示软件优势：
1、可以通过模板、例子快速创建计算机网络拓扑图，绘图时直接拖拽符号库图形到绘图页面即可;
2、作为全矢量的绘图软件，使用亿图绘制的图形图表无论放大多少倍依旧清晰无比;
3、亿图软件内置丰富的模板、例子，以及更多的在线模板供用户免费下载使用;
4、除了网络拓扑图，使用亿图软件还可轻松绘制：流程图、思维导图、工业设计、组织结构、商业展示、建筑平面图、科学插画、电气工程图、方向图、数据库图表等等，绘图类型多达200多种;
5、亿图图示支持跨平台使用，Windows、Mac、Linux可以同时使用;
6、支持导出各种流行的文件格式：图片(BMP、JPEG、PNG、GIF、TIFF)、PDF、PS、EPS、Office(Word、PPT、Excel)、Html、SVG、V
7、使用亿图软件可在没有安装亿图的电脑上用浏览器打开原文件。
8、云分享功能：可以将文件保存到个人云或者团队云中，随时随地保存文件，随时随地与团队分享。
9、人性化的打印设置，无论是打印所有的绘图页面，还是具体的某一个点的图形，使用亿图图示只要轻松设置，即可完成。
4.67 & 5 &1,200.00 &580.00
4.67 & 5 &1,200.00 &580.00}