以上内容摘取自《网格中基于相似推荐选择信任模型.pdf》，若想查看原文格式，请GoJS流程图控件如何使用javascript为图形对象添加提示信息
作者：&&&出处：&&& 15:06:39&&&阅读：26
是一款完全基于JavaScript的流程图控件，开发人员可以使用该产品创建交互式地流程图，支持图形模板和数据绑定，支持自定义对象的外观和行为。完全的跨平台和跨浏览器，下面简单介绍如何使用JavaScript为图形对象创建提示信息(ToolTip):
为任何对象提供了创建自定义提示信息的方法，在节点都有 GraphObject.toolTip属性，可以通过该属性来设置节点提示信息，对于图形则通过Diagram.toolTip来设置，下面是具体的代码：
diagram.nodeTemplate =
&&& $(go.Node, &Auto&,
&&&&& $(go.Shape, &RoundedRectangle&,
&&&&&&& { fill: &white& },
&&&&&&& new go.Binding(&fill&, &color&)),
&&&&& $(go.TextBlock, { margin: 5 },
&&&&&&& new go.Binding(&text&, &key&)),
&&&&&&& toolTip:& // define a tooltip for each node that displays the color as text
&&&&&&&&& $(go.Adornment, &Auto&,
&&&&&&&&&&& $(go.Shape, { fill: &#FFFFCC& }),
&&&&&&&&&&& $(go.TextBlock, { margin: 4 },
&&&&&&&&&&&&& new go.Binding(&text&, &color&))
&&&&&&&&& )& // end of Adornment
& // a function that produces the content of the diagram tooltip
& function diagramInfo(model) {
&&& return &Model:\n& + model.nodeDataArray.length + & nodes, & + model.linkDataArray.length + & links&;
& // provide a tooltip for the background of the Diagram, when not over any Part
& diagram.toolTip =
&&& $(go.Adornment, &Auto&,
&&&&& $(go.Shape, { fill: &#CCFFCC& }),
&&&&& $(go.TextBlock, { margin: 4 },
&&&&&&& // use a converter to display information about the diagram model
&&&&&&& new go.Binding(&text&, &&, diagramInfo))
& var nodeDataArray = [
&&& { key: &Alpha&, color: &lightblue& },
&&& { key: &Beta&, color: &pink& }
& var linkDataArray = [
&&& { from: &Alpha&, to: &Beta& }
& diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);
Copyright& 2006- all rights reserved.重庆磐岩科技有限公司(控件中国网) 版权所有 渝ICP备号 法律顾问：元炳律师事务所您所在位置： &
&nbsp&&nbsp&nbsp&&nbsp
快速成型中基于STL模型的信息处理技术的研究.pdf92页
本文档一共被下载：
次 ,您可免费全文在线阅读后下载本文档
文档加载中...广告还剩秒
需要金币：200 &&
你可能关注的文档：
··········
··········
青岛建筑工程学院
硕士学位论文
快速成型中基于STL模型的信息处理技术研究
姓名：张立强
申请学位级别：硕士
专业：机械设计及理论
指导教师：王斌修
座机电话号码
青岛建筑工程学院工学硕士学位论丈
快速成型制造 RP&M―Rapid
发展起来的一项先进技术，它是由机械工程、CAD、数控技术、激光技术及材
料科学的技术集合而成，它可以自动而迅速地直接由CAD模型制作三维实体。
该技术具有很多优点，其应用也日益广泛。但是，在实际的工程应用中，此技
术中还存在不少有待于进一步研究和解决的问题。
STL数据模型是当今商用RP系统广泛采用的CAD与RP的数据接口，已
成为RP工业界的事实标准。STL文件的数据处理效率直接影响快速成型的效
率，因此，针对STL文件本身的不足在数据处理方法上作改进是解决CAD与
RP系统之间数据接口问题的有效途径。本文对STL文件的缺陷及修补算法、分
层参数的优化、分层处理技术以及切片截面轮廓的数据处理等作了积极的探讨。
对现有的处理技术进行了系统的分析研究，并对某些处理技术的不足进行了补
充，形成了一种较为完善的基于STL模型的信息处理技术。
对STL模型缺陷的自动诊断与修复近年来取得了很大成绩，但对裂缝和孔
洞的修补仍不能令人满意，本文对STL模型的裂缝与孔洞缺陷提出了一种有效
诊断与修补软件系统，开发实现了程序部分模块的功能，其中包括①零件的几
何交换模块；②裂缝与空洞修补模块：③截面轮廓
正在加载中，请稍后...压缩包解压密码：
&&当前位置： ->
-> JavaScript图表图形框架 -- GOJS简介
JavaScript图表图形框架 -- GOJS简介
gojs是一个能够让我们很容易的实现基于html5浏览器绘制具有交互性的图形图表的JavaScript框架。 gojs采用了面向对象的编程模式。以图形对象表示绘图模板。以用普通js对象存储数据作为数据模型，然后赋值给图形对象的属性作为数据绑定的模式。 gojs同样提供了大量工具类来代表我们的交互行为。我们需要做的就是创建图形对象、构建数据模型、设置属性、绑定数据模型、使用工具类添加行为即可创建 出具有丰富交互性能的各种图表。
一个简单的gojs图表
下面的代码定义了一个node模板和数据模型，并它们构建了一个简单的图表：
// For conciseness. See the "Building Parts" intro page for more
var $ = go.GraphObject.
// the node template describes how each Node should be constructed
diagram.nodeTemplate =
$(go.Node, "Auto",
// the Shape automatically fits around the TextBlock
$(go.Shape, "RoundedRectangle",
// bind Shape.fill to Node.data.color
new go.Binding("fill", "color")),
$(go.TextBlock,
{ margin: 3 },
// some room around the text
// bind TextBlock.text to Node.data.key
new go.Binding("text", "key"))
// the Model holds only the essential information describing the diagram
diagram.model = new go.GraphLinksModel(
[ // a JavaScript Array of JavaScript objects, one per node
{ key: "Alpha", color: "lightblue" },
{ key: "Beta", color: "orange" },
{ key: "Gamma", color: "lightgreen" },
{ key: "Delta", color: "pink" }
[ // a JavaScript Array of JavaScript objects, one per link
{ from: "Alpha", to: "Beta" },
{ from: "Alpha", to: "Gamma" },
{ from: "Beta", to: "Beta" },
{ from: "Gamma", to: "Delta" },
{ from: "Delta", to: "Alpha" }
diagram.initialContentAlignment = go.Spot.C
// enable Ctrl-Z to undo and Ctrl-Y to redo
diagram.undoManager.isEnabled =
虽然上面展示的是图片，但是实际上我们可以在这个图表上用鼠标中键滚动、选中、删除、重做、撤销等等交互。
gojs的基本概念
上面的示例是让我们先在感官上认知一下gojs的产出物，下面我们来阐述一下gojs的基本概念。
gojs绘制的图表（Diagram）具有两个最基本的元素，就是点和线（Node和Link），并且他们可以自由组合组成一个组（Group）。所有的元素都处在图层（Layer）上，并且可以对它们进行布局（Layout）。
每个Diagram都是通过数据模型（Model）来填充和确定Node的信息和Link的所属关系的。并且我们只需要创建好Node和Link的模板以及数据模型，其他的是事情都交给gojs去处理。它会通过Model.nodeDataArray方法和GraphLinksModel.linkDataArray方法自动加载模型并构建元素。
每一个Node和Link都是通过模板来描述他们的文本、形状、颜色等信息以及交互行为。每个模板其实就是一个面板（Panel）（你可以将各种元素自由组合在它里面，也可以在它里面添加各种交互行为），比如说将TextBlock、Shape、Picture等元素添加到这个Panel中，鼠标进入离开的交互行为也可以添加到Panel中，那么这个Panel就是一个模板。
每个Node的位置可以使用Diagram.layout或Group.layout进行初始化设置，也可以基于交互行为进行拖拽。
gojs里的工具类可以为Diagram添加鼠标、键盘事件。一般情况下Diagram都默认设置了几种交互行为，比如说拖拽、连线。我们也可以通过ToolManager对象来管理工具类，或者说来管理交互行为，比如说可以停止某些交互，或开启某些交互等。
每个Diagram同时也包含CommandHandler对象，它的作用是添加一些键盘命令，比如点Delete键删除元素，Ctrl+C复制、Ctrl+V粘贴、Ctrl+Z撤销等。但是CommandHandler也是被ToolManager管理的。
Diagram也提供通过鼠标中键滚动视图、放大缩小视图。
gojs还提供了图表的预览视图（Overview），用于了解大规模图表的概况，同时还提供了组件管理面板（Palette），用于管理创建的组件，并且支持将组件拖拽到Diagram中。
在Diagram中，你可以选中Node或者Link，你会发现他们有少许的变化，比如在Node周围会增加选中框，选中Link会变色等。这些都是由Adornment对象控制的，你还可以用它来增加提示框、右键菜单等。
Diagram默认的交互行为
选中Node或者Link，会出现蓝色选中框，Link也会变为蓝色。
使用Ctrl+鼠标左键可以选中多个元素。
在Panel中点击鼠标左键移动鼠标可以移动所有元素。
使用Ctrl+A可以选中所有元素。
选中元素，用鼠标可以拖动元素。
使用Ctrl+C/Ctrl+V可以复制粘贴元素。
使用Delete键可以删除元素。
选中多个元素，然后使用Ctrl+G可以将这些选中的元素组合成一个组。
使用Ctrl+Shift+G可以拆散组。
当元素超出Diagram时，可自动出现滚动条。
用鼠标拖拽Node边缘可以与其他Node进行连线。
选中Link，可以重新选择目标Node，即可以重新连线。
创建一个Diagram
每个Diagram都需要依托与一个HTML的DIV元素，虽然由gojs接管了这个DIV，但是DIV本身的属性依然可以由我们通过CSS设置，比如位置、高宽等。gojs实际上是在DIV中创建了一个Canvas元素，Canvas的高宽自动适配DIV的高宽。
&!-- The DIV for a Diagram needs an explicit size or else we won't see anything.
In this case we also add a border to help see the edges. --&
&div id="myDiagramDiv" style="border: solid 1 width:400 height:150px"&&/div&
当然，当你准备开始创建Diagram前，首先要导入gojs的文件。gojs的文件分为Develop（gojs-debug.js）和Product（gojs.js）两种，前者是供开发人员使用的，因为它包含了一些用于调试的代码，后者用于正式发布，速度较快。gojs不依赖与任何JavaScript框架，所以它可以与任何JavaScript框架一起使用，而不会产生冲突。 &!-- Include the GoJS library. --&
&script src="gojs.js"&&/script&
下面就可以使用gojs将上述的DIV构建为一个Diagram了，这里需要注意的是，使用gojs的api时，都要使用前缀go.。 &!-- Create the Diagram in the DIV element using JavaScript. --&
&!-- The "go" object is the "namespace" that holds all of the GoJS types. --&
var diagram = new go.Diagram("myDiagramDiv");
diagram.model = new go.GraphLinksModel(
[{ key: "Hello" },
// two node data, in an Array
{ key: "World!" }],
[{ from: "Hello", to: "World!"}]
// one link, in an Array
来自：/articles/gojs-simple-diagram/
推荐阅读排行
Copyright 2013 - 2015
All Rights Reserved 浙ICP备号JAVA开发（84）
废话先不多说，先上图；这是一个模拟设备状态的拓扑图；图中节点右上角的圆形图标绿色代表正常，红色代表设备一次；在图片的左上角 是用来获取节点的详细信息的。具体方法在js中有注释，
因为这只是个教程，所以在写代码上不是很规范。所以希望大家多多见谅。而且因为本人对这个插件的研究也有限，有什么不对的也希望多多交流 谢谢！
接着上代码。这是前端html和js代码；首先介绍下该功能的实现方法。是利用GoJS插件。 网址；其中官网的包可以在这里下载：；官网提供的包是英文的包括注释也是，而且不是很详细。所有我在本例子中
&将关键的代码全部做了注释。基本上有点基础应该都能弄明白；为了直观，我直接将代码注释写在了代码所在的位置；这个插件在官网提供了很多例子。也有APS文档。但是本人觉得他的API文档写的有点杂。很难看懂，跟别说那些英语基础不好的人了。但是没关系，后面我会介绍一下如何巧妙不看文档也能做出不同效果的拓扑图；或者说实现你想要的拓扑图；
1 &!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&
&title&安防点位拓扑图&/title&
&!-- /* Copyright ? by Northwoods Software Corporation. */ --&
&link href=&goSamples.css& rel=&stylesheet& type=&text/css& /&
&script type=&text/javascript& src=&go.js&&&/script&
&script type=&text/javascript& src=&goSamples.js&&&/script&--&
&script src=&../resources/scripts/jquery-1.7.1.min.js& type=&text/javascript&&&/script&
&script type=&text/javascript&&
var AjaxRequestBack=false;
function init() {
if (window.goSamples) goSamples();
var $ = go.GraphObject.
myDiagram = $(go.Diagram, &myDiagram&,
initialContentAlignment: go.Spot.Center //整个拓扑图的位置
//节点的图片，根据传进来的参数获取相对应的图片
function nodeTypeImage(type) {
if (type.charAt(0) === &1&) return &images/1.png&;
if (type.charAt(0) === &2&) return &images/2.png&;
if (type.charAt(0) === &3&) return &images/3.png&;
if (type.charAt(0) === &4&) return &images/4.png&;
if (type.charAt(0) === &5&) return &images/5.png&;
if (type.charAt(0) === &6&) return &images/6.png&;
if (type.charAt(0) === &7&) return &images/7.png&;
if (type.charAt(0) === &8&) return &images/8.png&;
return &images/0.png&;
function nodeProblemConverter(msg) {
if (msg) return &red&;
return null;
//判断节点左边形状
function nodeOperationConverter(s) {
if (s &= 2) return &TriangleDown&;
if (s &= 1) return &Rectangle&;
return &Circle&;
//判断节点右边形状的颜色
function nodeStatusConverter(s) {
if (s &= 2) return &red&;
if (s &= 1) return &green&;
return &green&;
//可以通过 problem控制节点的连线和边框的颜色
//data.status = 10.1;//控制节点内部图标的颜色
//data.operation //控制节点内图标的形状
myDiagram.nodeTemplate =
$(go.Node, &Vertical&,
{ selectable: false,//是否可以选择节点并移动
mouseOver: function (e, obj) {//鼠标进入响应的事件方法
nodeDoubleClick(e, obj) //事件调用方法
{ doubleClick: nodeDoubleClick },//鼠标双击事件函数
//{click: nodeDoubleClick }, //鼠标单击事件函数
{locationObjectName: &ICON& },
// new go.Binding(&location&, &loc&, go.Point.parse).makeTwoWay(go.Point.stringify), //这里使用节点的位置参数，也可以不知用，不使用的时候，就的使用插件的布局属性
$(go.Panel, &Spot&,
$(go.Panel, &Auto&,
{ name: &ICON& }, //这个参数无所谓
$(go.Shape,
{ fill: null, portId: &&,
strokeWidth: 0,stroke: null },//这两个属性和起来去掉边框
new go.Binding(&background&, &problem&, nodeProblemConverter)), //这里使用节点的问题描述 problem值为空时：控制线条和边框的颜色，即设备是否出现问题
$(go.Picture,
//{ stroke: &&},
{ margin: 0 }, //这里控制图片和外围边框的边距
{ desiredSize: new go.Size(60, 60) },
new go.Binding(&source&, &type&, nodeTypeImage))), //这里是用节点的类型，即是用的图片
//这段代码是控制节点内部左边图标初始颜色 形状等，位子信息
$(go.Shape, &Circle&,
{ alignment: go.Spot.TopLeft, alignmentFocus: go.Spot.TopLeft, //TopLeft显示的位置
width: 10, height: 10, fill: &Green&//这里的颜色是控制节点内部左边图标的颜色
new go.Binding(&figure&, &operation&, nodeOperationConverter)) //这里是用节点形状参数
//这段代码是控制节点内部右边图标初始颜色 形状等，位子信息
$(go.Shape, &Circle&,
{ alignment: go.Spot.TopRight, alignmentFocus: go.Spot.TopRight, //TopLeft显示的位置
width: 15, height: 15, fill: &Green&
new go.Binding(&fill&, &status&, nodeStatusConverter)) //这里是用节点状态参数
//这里是节点文字的样式
$(go.TextBlock,
{ font: &bold 7px Helvetica, bold Arial, sans-serif&,
stroke: &black&, margin: 3 },
new go.Binding(&text&)));
//设置线条的颜色
function linkProblemConverter(msg) {
if (msg) return &red&;
return &#ccc&;
myDiagram.linkTemplate =
$(go.Link, go.Link.AvoidsNodes,
{ corner: 3 }, //控制线的转弯的弧度值越小 越呈现直角
$(go.Shape,
{ strokeWidth: 1 }, //控制线条的粗细，值越大
new go.Binding(&stroke&, &problem&, linkProblemConverter)));
//节点的布局
myDiagram.layout = $(go.LayeredDigraphLayout,
{ direction: 270, //拓扑图的方向
layerSpacing: 10,
columnSpacing: 15,
setsPortSpots: false
//在这里加载数据
//利用随机数随机设备出现问题的方法
function randomProblems() {
if(AjaxRequestBack)
var model = myDiagram.
//nodeDataArray
//设置问题节的颜色
var arr = model.nodeDataA
for (var i = 0; i & arr. i++) {
data = arr[i];
//console.log(data.key);
for(var t=0;t&IdList.t++)
if(data.key==IdList[t])
data.status = 3;
//data.status = 1;
//data.problem = (Math.random() & 0.8) ? && : &Power loss due to ...&;//0.8是一个零界点
//data.problem = &&; //当为空的时候就是没问题
//data.problem = &Power loss due to ...&;//当这个的时候就是有问题
//data.status = 10.1;//这个数据是用于判断节点右边正方形 圆形 三角形还有形状的颜色（右边形状不变）
//data.operation = 0.1; //设置节点左边正方形 圆形 三角形还有形状的颜色（左边的形状颜色不变）
//data.operation = 0.3;
model.updateTargetBindings(data);
data.status = 1;
//获取JSON数据中的linkDataArray
//设置节点之间线的颜色
arr = model.linkDataA
for (i = 0; i & arr. i++) {
data = arr[i];
data.problem = (0.1 & 0.7) ? && : &No Power&;
model.updateTargetBindings(data);
AjaxRequestBack=false;
//设置间隔时间获取设备的状态
function loop1()
setTimeout(function () { GetStatus(); loop1(); }, 4000);
function loop() {
setTimeout(function () { randomProblems(); loop(); }, 5500);
// start the simulation
myDiagram.makeImage({
background: &AntiqueWhite&,
type: &image/jpeg&,
details: 0.05
function load() {
var str = &%=Result%&;
myDiagram.model = go.Model.fromJson(str);
var arr = myDiagram.model.nodeDataA
for (var i = 0; i & arr. i++) {
// alert(arr[i].text);
function GetStatus() {
url: 'GetEleStatus.ashx',
type:'post',
success: function (data) {
var result = eval(&(& + data + &)&);
IdList = result.IdL
AjaxRequestBack=true;
function highlightNode(e, node) {
alert(node.data.text);
function nodeDoubleClick(e, node) {
$(&#Loading&).html(&正在加载...&);
url: 'GetElementInfo.ashx',
data: { &ElementID&: node.data.key },
success: function (data) {
if (data != &false&) {
data = eval(&(& + data + &)&);
var name = data.
var commont =
$(&#Info&).html(&&span&点位名称：&+name+&&/span&&/br&&span&点位描述:&+commont+&&/span&&)
$(&#Info&).show();;
243 &/head&
244 &body onload=&init()&&
&div id='Info' style=&position: padding-top: 5 margin: 1 line-height: 20
border-radius: 3 background-color: #FFC435; width: 150 height: 50 z-index: 999;
border: 1px solid # top: 7 left: 7&&
&div id=&Loading& style=&text-align: width: 150 margin-top: 15&&
选择点位&/div&
&div id=&myDiagram& style=&border: solid 0 width: 100%; height: 900&&
&%--&/div&--%&
257 &/body&
258 &/html&
接下来是后台代码；后台代码的注释也写在代码所在的行了。
2 using System.Collections.G
3 using System.L
4 using System.W
5 using System.Web.UI;
6 using System.Web.UI.WebC
7 using System.T
8 using System.D
10 namespace Maticsoft.Web.test
public partial class DrowNode : System.Web.UI.Page
public string R
protected void Page_Load(object sender, EventArgs e)
DataSet set = new DataSet();
set = new Maticsoft.BLL.RD_Element().Query(&&);//这里是写的SQL语句 去获取你数据库的数据。这里我删除掉了。而是利用下面构造的数据。这里你获取的数据必须包含两个字段，一个是父节点编号，一个是子节点编号。
if (set != null && set.Tables.Count & 0)
StringBuilder result = new StringBuilder();
StringBuilder node = new StringBuilder();//这个对象是存放着节点信息
StringBuilder link = new StringBuilder();//这个节点是存放每个节点的关联关系
//这两个是节点的位置。但是我用了另一种布局方式，这里已经没用了。
int y = 0;
int x = 0;
Random r = new Random();
int count = set.Tables[0].Rows.C
// 下面是构造的数据。该插件是利用后台生成的Json格式数据来解析的；
//key 是节点编号 text是节点下面的文字。type是节点的类型。在html代码有一个方法nodeTypeImage就是根据这个来返回图片路径的。problem则是用来标识节点数否异常。这里有一个可能会混淆，那就是节点异常和节点之间的连接异常。具体在js代码有注释，当然这里还有其他的属性，就不一一介绍了。
node.Append(&{\&key\&:\&0\&, \&text\&:\&北京\&, \&type\&:\&0\&, \&problem\&:\&\&},&);
node.Append(&{\&key\&:\&-1\&, \&text\&:\&中国\&, \&type\&:\&0\&, \&problem\&:\&\&},&);
node.Append(&{\&key\&:\&-2\&, \&text\&:\&福建\&, \&type\&:\&0\&, \&problem\&:\&\&},&);
node.Append(&{\&key\&:\&10000\&, \&text\&:\&风扇\&, \&type\&:\&2\&, \&problem\&:\&\&},&);
node.Append(&{\&key\&:\&10001\&, \&text\&:\&风扇风扇\&, \&type\&:\&2\&, \&problem\&:\&\&},&);
node.Append(&{\&key\&:\&10002\&, \&text\&:\&风扇\&, \&type\&:\&4\&, \&problem\&:\&\&},&);
node.Append(&{\&key\&:\&10003\&, \&text\&:\&风扇\&, \&type\&:\&5\&, \&problem\&:\&\&},&);
node.Append(&{\&key\&:\&10004\&, \&text\&:\&发电机\&, \&type\&:\&1\&, \&problem\&:\&\&},&);
node.Append(&{\&key\&:\&10005\&, \&text\&:\&水龙头\&, \&type\&:\&5\&, \&problem\&:\&\&},&);
node.Append(&{\&key\&:\&10006\&, \&text\&:\&发电站\&, \&type\&:\&7\&, \&problem\&:\&\&},&);
node.Append(&{\&key\&:\&10007\&, \&text\&:\&火箭\&, \&type\&:\&8\&, \&problem\&:\&\&},&);
node.Append(&{\&key\&:\&10008\&, \&text\&:\&卫星\&, \&type\&:\&3\&, \&problem\&:\&\&},&);
node.Append(&{\&key\&:\&10009\&, \&text\&:\&卫星\&, \&type\&:\&5\&, \&problem\&:\&\&},&);
node.Append(&{\&key\&:\&100010\&, \&text\&:\&卫星\&, \&type\&:\&6\&, \&problem\&:\&\&},&);
node.Append(&{\&key\&:\&100011\&, \&text\&:\&火箭\&, \&type\&:\&3\&, \&problem\&:\&\&},&);
node.Append(&{\&key\&:\&100012\&, \&text\&:\&发电机\&, \&type\&:\&3\&, \&problem\&:\&\&},&);
node.Append(&{\&key\&:\&100013\&, \&text\&:\&发电机\&, \&type\&:\&5\&, \&problem\&:\&\&},&);
node.Append(&{\&key\&:\&100014\&, \&text\&:\&风扇\&, \&type\&:\&6\&, \&problem\&:\&\&},&);
node.Append(&{\&key\&:\&100015\&, \&text\&:\&拖拉机\&, \&type\&:\&3\&, \&problem\&:\&\&},&);
node.Append(&{\&key\&:\&100016\&, \&text\&:\&公交车\&, \&type\&:\&5\&, \&problem\&:\&\&},&);
node.Append(&{\&key\&:\&100017\&, \&text\&:\&广场控灯\&, \&type\&:\&6\&, \&problem\&:\&\&},&);
node.Append(&{\&key\&:\&100018\&, \&text\&:\&演出屏幕\&, \&type\&:\&3\&, \&problem\&:\&\&},&);
node.Append(&{\&key\&:\&100019\&, \&text\&:\&话筒\&, \&type\&:\&3\&, \&problem\&:\&\&},&);
node.Append(&{\&key\&:\&100020\&, \&text\&:\&音箱\&, \&type\&:\&5\&, \&problem\&:\&\&},&);
node.Append(&{\&key\&:\&100021\&, \&text\&:\&核武器\&, \&type\&:\&6\&, \&problem\&:\&\&},&);
//这里的数据是关联各个节点的。from是线出来的节点编号，to则是连线到达的节点编号。这样就能把两节点关联起来
link.Append(&{\&from\&:\&0\&, \&to\&:\&-1\&,\&problem\&:\&\&},&);
link.Append(&{\&from\&:\&-2\&, \&to\&:\&-1\&,\&problem\&:\&\&},&);
link.Append(&{\&from\&:\&10000\&, \&to\&:\&0\&,\&problem\&:\&\&},&);
link.Append(&{\&from\&:\&10001\&, \&to\&:\&0\&,\&problem\&:\&\&},&);
link.Append(&{\&from\&:\&10002\&, \&to\&:\&0\&,\&problem\&:\&\&},&);
link.Append(&{\&from\&:\&10003\&, \&to\&:\&10002\&,\&problem\&:\&\&},&);
link.Append(&{\&from\&:\&10004\&, \&to\&:\&10002\&,\&problem\&:\&\&},&);
link.Append(&{\&from\&:\&10005\&, \&to\&:\&-2\&,\&problem\&:\&\&},&);
link.Append(&{\&from\&:\&10006\&, \&to\&:\&-2\&,\&problem\&:\&\&},&);
link.Append(&{\&from\&:\&10007\&, \&to\&:\&-2\&,\&problem\&:\&\&},&);
link.Append(&{\&from\&:\&10008\&, \&to\&:\&100017\&,\&problem\&:\&\&},&);
link.Append(&{\&from\&:\&10009\&, \&to\&:\&-2\&,\&problem\&:\&\&},&);
link.Append(&{\&from\&:\&100010\&, \&to\&:\&-2\&,\&problem\&:\&\&},&);
link.Append(&{\&from\&:\&100011\&, \&to\&:\&100019\&,\&problem\&:\&\&},&);
link.Append(&{\&from\&:\&100012\&, \&to\&:\&10005\&,\&problem\&:\&\&},&);
link.Append(&{\&from\&:\&100013\&, \&to\&:\&10005\&,\&problem\&:\&\&},&);
link.Append(&{\&from\&:\&100014\&, \&to\&:\&10005\&,\&problem\&:\&\&},&);
link.Append(&{\&from\&:\&100015\&, \&to\&:\&10007\&,\&problem\&:\&\&},&);
link.Append(&{\&from\&:\&100016\&, \&to\&:\&10007\&,\&problem\&:\&\&},&);
link.Append(&{\&from\&:\&100017\&, \&to\&:\&10009\&,\&problem\&:\&\&},&);
link.Append(&{\&from\&:\&100018\&, \&to\&:\&10007\&,\&problem\&:\&\&},&);
link.Append(&{\&from\&:\&100019\&, \&to\&:\&10009\&,\&problem\&:\&\&},&);
link.Append(&{\&from\&:\&100020\&, \&to\&:\&100011\&,\&problem\&:\&\&},&);
link.Append(&{\&from\&:\&100021\&, \&to\&:\&100011\&,\&problem\&:\&\&},&);
//这段代码是我本来用来构造数据库中数据的JSON格式的，但是因为没用了。不过来是贴出来，如果你有用可以照着这个写
//foreach (DataRow row in set.Tables[0].Rows)
x = r.Next(count*20)+40;
y = r.Next(count*20)+100;
node.Append(&{\&key\&:\&& + row[&id&] + &\&, \&text\&:\&& + row[&name&] + &\&, \&type\&:\&& + row[&type&] + &\&, \&loc\&:\&& + x + & &+y+&\&,\&problem\&:\&\&},&);
//elemodel = new BLL.RD_Element().GetModel(int.Parse(row[&parentid&].ToString ()));
link.Append(&{\&from\&:\&& + row[&id&] + &\&, \&to\&:\&& + row[&parentid&].ToString() + &\&,\&problem\&:\&\&},&);
string nodestr = node.ToString().Substring(0, node.ToString().Length - 1);
string linkstr = link.ToString().Substring(0, link.ToString().Length - 1);
result.Append(&{\&nodeDataArray\&: [ &);
result.Append(nodestr);
result.Append(&],\&linkDataArray\&: [ &);
result.Append(linkstr);
result.Append(&]}&);
Result = result.ToString();
然后是异步获取设备状态的C#代码。这里因为没有真正的设备信息。所以获取的异常设备都是利用随机函数构造出来的 代码如下 其中返回的是json格式的数据，数据为异常设备的编号
2 using System.Collections.G
3 using System.L
4 using System.W
6 namespace Maticsoft.Web.test
/// &summary&
/// GetEleStatus 的摘要说明
/// &/summary&
public class GetEleStatus : IHttpHandler
public void ProcessRequest(HttpContext context)
context.Response.ContentType = &text/plain&;
string result=&{\&IdList\&:[&;
Random r = new Random();
for (int i = 0; i & 10; i++)
result += r.Next(100000,100022)+&,&;
result = result.Substring(0, result.Length - 1);
result += &]}&;
context.Response.Write(result);
public bool IsReusable
return false;
最后是获取设备的详细信息，这个是在鼠标移动到设备节点上的时候异步请求获取的。这里就不详细说了，大家可以根据自己的需求来做，也不难。
然后做一下总结。插件首先是解析你构造的Json数据，然后放在myDiagram.model对象里。在数据中有两个数据：nodeDataArray和linkDataArray分别存放节点信息和节点关联信息；然后js去遍历迭代这是两个数组中的数据来构造拓扑图。那么在迭代的过程中。我们可以利用自己的需求去添加代码实现我们想要的拓扑图！
这里的话我分享下我是这么做的吧。首先 如果你的英语水平很好并且文档阅读能力较强，那么可以不用往下看了。因为直接去看文档理解得也深一些，也能明白一些实现原理。
首先 你的明白你的需求是什么。即你要实现什么样的拓扑图。然后 你去官网他的例子里面找。找到和你想要的差不多的拓扑图，或者某个拓扑图有你要的某个样式或者布局方式，或者交互方式等等。然后看他的代码。那么这里你有的先了解整个插件的实现过程。你可以通过详细分析我的代码和注释，应该就能大概明白某写代码是什么功能。某个功能是那个方法实现的，因为整个插件的实现原理都是一样的。所以一些方法和属性也是一样的，只不过根据属性的值，能得到不同的拓扑图；比如布局属性myDiagram.layout &比如节点连接属性：myDiagram.linkTemplate
那么这里就那布局属性说事，可能你想要的布局不是我这个例子中的样子，那么你就可以到其他拓扑图找到你想要的布局方式，然后把他的代码拿过来。替换掉现有的布局代码，当然这里布局有两种方式，一种是插件自动给你布局，就像我这个例子，还有一种是你自己构造每个节点的位置。 其他的也都大同小异。其实这就是一个组装拼接的过程。有时候一些外国插件没有什么文档的时候，我都是这干的，而且效果不错，速度也快。当然可能这样做对整个插件的理解就没有那么透彻了；
（这里插播一条广告：这是本人的淘宝店。唉 苦逼的挨踢男。希望大家多多支持吧）
最后 &因为这个插件是带有水印的。如果要去水印。就得到他的官网注册购买。当然我这也有一个破解版的，不过如果你真的要用，还是希望支持正版。
下载地址如下：/share/link?shareid=&uk=
最后 因为是第一次写博客，有什么需要改进的地方请多多批评 多多建议。谢谢，也希望多多交流。哈哈
源码地址：/zhijiang/DrowNode.rar
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：63867次
积分：1619
积分：1619
排名：第17194名
原创：102篇
(1)(2)(2)(1)(2)(6)(4)(1)(1)(1)(1)(1)(4)(4)(2)(3)(2)(1)(5)(1)(7)(11)(1)(5)(1)(6)(10)(10)(2)(2)(1)(1)