node

GoJS提供了非常简单的创建Node节点的方法，可将文本内容、结点形状、背景颜色、边距等属性通过数据绑定[go.Binding]直接绑定到对应的Node数据中。

本文简单介绍Node的创建过程及对应属性的绑定。

1.simple node

创建一个只包含文本的Node,利用数据绑定，设置节点的背景颜色、文本内容、节点形状。代码如下：

<html lang="en">

<head>

    <meta charset="UTF-8">

    <script src="https://cdnjs.cloudflare.com/ajax/libs/gojs/1.7.7/go-debug.js"></script>

    <title>Document</title>

</head>

<body>

    <div id="myDiagramDiv" style="width:300px; height:300px; background-color: #DAE4E4;"></div>

    <script>

        var $ = go.GraphObject.make;

        //取创建的DIV作为画布

        var  diagram  =  $(go.Diagram,  "myDiagramDiv",   {            

            initialContentAlignment:  go.Spot.Center,

            "toolManager.mouseWheelBehavior":  go.ToolManager.WheelZoom//通过鼠标滚轮放大或缩小画布       

        });

        diagram.nodeTemplate =

            $(go.Node, "Auto",

                $(go.Shape,

                    new go.Binding("figure","shape"), //绑定Node的形状，也可直接设置Shape.figure

                    new go.Binding("fill", "color")),   //绑定背景填充颜色

                    $(go.TextBlock,

                        { margin: 5 },

                        new go.Binding("text", "key"))  //绑定文本内容，显示在对应的Node上

    );

  //Node原始数据

  diagram.model.nodeDataArray = [

    { key: "Alpha", color: "lightblue", shape:"Rectangle" },

    { key: "Beta", color: "yellow", shape:"Circle" }，

    { key: "Gamma", color: "lightblue", fig: "Hexagon" },

    { key: "Delta", color: "lightblue", fig: "FramedRectangle" }

  ];

</script>

</body>

</html>

设置go.Shape属性可以给node添加不同的样式，example:

 $(go.Shape, "Rectangle",{

                  figure: "Club"//Node形状

                  width: 40,  //设置Node宽度,单位px

                  height: 60, //Node高度

                  margin: 4,  //边距

                  fill: "green", //填充颜色

                  background:"yellow"//背景颜色

                  strokeWidth:2//线宽

                   })

设置go.TextBlock的属性可以给文本添加不同的样式，example:

 $(go.TextBlock, { text: "a Text Block",

                   background: "lightgreen",

                   margin: 2,

                   width: 100,

                   height: 33,

                   alignment:go.Spot.Right

                    })

(2) GoJS Node简介的更多相关文章

  1. (3)Gojs model简介

    (3)Gojs model简介 在GoJS中,model用来存储表的基本数据,包括node.link等具体对象和属性,与其在视觉上的展示效果不相关.model中往往只保存相对简单的数据,最方便且持久化 ...

  2. 《深入浅出Node.js》第1章 Node简介

    @by Ruth92(转载请注明出处) 第1章 Node简介 一.Node的起源 高性能Web服务器的要点:事件驱动.非阻塞I/O. 选择JavaScript的原因:高性能.符合事件驱动.没有历史包袱 ...

  3. node 简介 起源

    最近的node 的一篇文章阅读量很大,所以写一篇基础篇供大家分享,抛砖引玉,各取所需. 部分内容来源大神笔记. Node.js 简介:@@@@@@@@@@@@@@@@@@@ Node.js是目前非常火 ...

  4. 深入浅出node(1) Node简介

    这一系列主要是自己在学习深入浅出node.js这本书的学习笔试,部分加入了自己的一些理解 分享给一起学习node的小伙伴 自己还是个初学者 有很多地方理解的不到位 一起交流 一 什么是node 1.1 ...

  5. 深入浅出Node.js (1) - Node简介

    1.1 Node的诞生历程 1.2 Node的命名与起源 1.2.1 为什么是JavaScript 1.2.2 为什么叫Node 1.3 Node给JavaScript带来的意义 1.4 Node的特 ...

  6. node简介

    1. Node.js是什么? 简单的说 Node.js 就是运行在服务端的 JavaScript. Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台. Node.js ...

  7. node必知必会之node简介

    1.什么是node.js 按照: Node.js官方网站主页 的说法: Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript ...

  8. 【读书笔记】《深入浅出nodejs》第一章 Node简介

    1. Node的官方网站: http://nodejs.org 2. Node的缘起: Ryan Dahl 打算设计一个高性能的Web服务器. Ryan Dahl 认为设计高性能Web服务器的要点在于 ...

  9. 《Node.js 高级编程》简介与第二章笔记

    <Node.js 高级编程> 作者简介 Pedro Teixerra 高产,开源项目程序员 Node 社区活跃成员,Node公司的创始人之一. 10岁开始编程,Visual Basic.C ...

随机推荐

  1. luogu1314 聪明的质检员

    题目大意 小 T 是一名质量监督员,最近负责检验一批矿产的质量.这批矿产共有 n 个矿石,从 1 到 n 逐一编号,每个矿石都有自己的重量 wi 以及价值 vi.检验矿产的流程是: 1.给定 m 个区 ...

  2. mysql与mongoDB的特点和优劣

    首先分析下mysql与mongoDB的特点和优劣 从图中分析: 再来分析下应用场景: a.如果需要将mongodb作为后端db来代替mysql使用,即这里mysql与mongodb 属于平行级别,那么 ...

  3. 手推FP-growth (频繁模式增长）算法------挖掘频繁项集

    一.频繁项集挖掘为什么会出现FP-growth呢? 原因:这得从Apriori算法的原理说起,Apriori会产生大量候选项集(就是连接后产生的),在剪枝时,需要扫描整个数据库(就是给出的数据),通过 ...

  4. [Swift通天遁地]一、超级工具-(7)创建一个图文并茂的笔记本程序

    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...

  5. [Swift]关键字：Self、self与super

    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...

  6. 使用 typescript 和 canvas 重构snow效果

    前言:之前做过一个 snow 效果,但是是直接用 HTML 做的点击此处查看 ,几个星期前,我用 typescript 和 canvas 重构了一下, snow效果是一个很简单的效果,但是用来练手还是 ...

  7. json和Jsonp 使用总结（1）

    1.Json的使用 $.getJSON("subPreview", { jsonDatas: JSON.stringify(jsonData) }, function(data) ...

  8. 在计算机视觉与人工智能领域，顶级会议比SCI更重要（内容转）

    很多领域,SCI是王道,尤其在中国,在教师科研职称评审和学生毕业条件中都对SCI极为重视,而会议则充当了补充者的身份.但是在计算机领域,尤其是人工智能与机器学习领域里,往往研究者们更加青睐于会议 我无 ...

  9. exe4j将可执行的jar封装成exe文件

    1,将java项目打包成可执行的jar:https://www.cnblogs.com/3b2414/p/9355292.html, 2,下载好exe4j工具, 3,首先注册,如果你不注册,打包好的软 ...

  10. Git在工作中对项目的操作流程

    Git 的准备工作 第一步:Git初始化 第一次在电脑上使用时,应该初始化操作,以后再使用Git操作,无需初始化,直接进行Git其他操作 git config --global user.name & ...