可视化图表库--goJS

"Rectangle"--矩形, "RoundedRectangle"--圆角矩形, "Square"--正方形 "Ellipse"--椭圆 "Diamond"--菱形, "Circle"--圆形 各种三角形 "TriangleRight", "TriangleDown", "TriangleLeft", "TriangleUp", "Triangle", "LineH", "LineV", "BarH", "BarV", "MinusLine", "PlusLine", "XLine"

myDiagram.nodeTemplate = $(
go.Node,
"Horizontal",
{ background: "#44CCFF" },
$(
go.Shape,
"Rectangle",
{
portId: "",
fromLinkable: true,
toLinkable: true,
cursor: "pointer",
fill: "white",
strokeWidth: 1
},
new go.Binding("figure"),
new go.Binding("fill")
),
$(go.Picture, { margin: 10, width: 50, height: 50, background: "red" }, new go.Binding("source"), new go.Binding("figure")),
$(go.TextBlock, "Default Text", { margin: 12, stroke: "white", font: "bold 16px sans-serif" }, new go.Binding("text", "name"))
);

myDiagram.nodeTemplateMap.add("Center",
$(go.Node, "Spot",
{
selectable: false,
isLayoutPositioned: false, // the Diagram.layout will not position this node
locationSpot: go.Spot.Center
},
$(go.Shape, "Circle",
{ fill: radBrush, strokeWidth: 0, stroke: null, desiredSize: new go.Size(200, 200) }), // no outline
$(go.TextBlock, "Arrowheads",
{ margin: 1, stroke: "white", font: "bold 14px sans-serif" })
));

myDiagram.model =
$(go.GraphLinksModel,
{ // this gets copied automatically when there's a link data reference to a new node key
// and is then added to the nodeDataArray
archetypeNodeData: {},
// the node array starts with just the special Center node
nodeDataArray: [{ category: "Center", key: "Center" }],
// the link array was created above
linkDataArray: linkdata
});
}

myDiagram.linkTemplate =
$(go.Link, // the whole link panel
{ routing: go.Link.Normal },
$(go.Shape, // the link shape
// the first element is assumed to be main element: as if isPanelMain were true
{ stroke: "gray", strokeWidth: 2 }),
$(go.Shape, // the "from" arrowhead
new go.Binding("fromArrow", "fromArrow"),
{ scale: 2, fill: "#D4B52C" }),
$(go.Shape, // the "to" arrowhead
new go.Binding("toArrow", "toArrow"),
{ scale: 2, fill: "#D4B52C" }),
{
click: showArrowInfo,
toolTip: // define a tooltip for each link that displays its information
$("ToolTip",
$(go.TextBlock, { margin: 4 },
new go.Binding("text", "", infoString).ofObject())
)
}
);

myDiagram =
$(go.Diagram, "myDiagramDiv", // 画布定义
{layout:$(go.GridLayout, //自动布局定义，设置为网格布局
{ comparer: go.GridLayout.smartComparer,//设置从小到大排序
spacing: go.Size.parse("20 20"),//设置节点间隔
comparer: function(a, b){
//重写布局算法,根据其他属性值重新增设置顺序
var ay = a.data.type;
var by = b.data.type;
if(!!ay&&!!by){
if(ay > by) return -1;
if(ay < by) return 1;
}else if(!!ay){
return -1;
}else if(!!by){
return 1;
}
}
});
});

myDiagram = goObj(go.Diagram, "myDiagramDiv",
{
initialContentAlignment: go.Spot.Center,
allowDrop: true,
"LinkDrawn": showLinkLabel,
"LinkRelinked": showLinkLabel,
"animationManager.duration": 800,
"undoManager.isEnabled": true
});
function showLinkLabel(e) {
var label = e.subject.findObject("LABEL");
if (label !== null) label.visible = (e.subject.fromNode.data.figure === "RoundedRectangle");
}

myDiagram.addDiagramListener("Modified", function(e) {
var button = document.getElementById("SaveButton");
if (button) button.disabled = !myDiagram.isModified;
var idx = document.title.indexOf("*");
if (myDiagram.isModified) {
if (idx < 0) document.title += "*";
} else {
if (idx >= 0) document.title = document.title.substr(0, idx);
}});

myDiagram.addDiagramListener("ExternalObjectsDropped", function(e) {
var newnode = e.diagram.selection.first();
if (newnode.linksConnected.count === 0) {
// when the selection is dropped but not hooked up to the rest of the graph, delete it
e.diagram.commandHandler.deleteSelection();
}
});

$('#deletePart').click(function(){
if("undefined" == typeof myDiagram){
result_prompt(0, "浏览器不兼容此功能，请使用高版本谷歌浏览器！");
return false;
}
myDiagram.remove(Select_Port);
}); $('#undo-buttun').click(function(){
if("undefined" == typeof myDiagram){
result_prompt(0, "浏览器不兼容此功能，请使用高版本谷歌浏览器！");
return false;
}
myDiagram.undoManager.undo();
}); $('#redo-buttun').click(function(){
if("undefined" == typeof myDiagram){
result_prompt(0, "浏览器不兼容此功能，请使用高版本谷歌浏览器！");
return false;
}
myDiagram.undoManager.redo();
});

{
contextMenu: $(go.Adornment, "Vertical", new go.Binding("itemArray", "commands"), {
itemTemplate: $(
"ContextMenuButton",
$(go.Shape, { figure: "RoundedRectangle", fill: "transparent", width: 40, height: 24, stroke: "gray", strokeWidth: 1, scale: 1.0, areaBackground: "transparent" }),
$(go.TextBlock, { stroke: "deepskyblue", height: 24, width: 40, margin: 0, font: "bold 12px serif", textAlign: "center", verticalAlignment: go.Spot.Center }, new go.Binding("text")),
{
click: function(e, button) {
if (myDiagram.isReadOnly) return;
var cmd = button.data;
var nodedata = button.part.adornedPart.data;
// console.log(nodedata);
let curNode = myDiagram.findNodeForKey(nodedata.key);
options.contextMenu(curNode, cmd.text);
// console.log("On " + nodedata.text + " " + cmd.text + ": " + cmd.action);
}
}
)
})
}

{
text: "开始策略",
figure: "Ellipse",
fill: "#FEF7E7",
stroke: '#FDCF90',
info: "",
type: "start",
commands: [{ text: "查看", action: "view" }, { text: "删除", action: "view" }],
},

{fromPort: "B", toPort: "T", from: -1, to: -3,category: "auditedDottedLine"}

// 自定义虚线样式
myDiagram.linkTemplateMap.add(
"auditedDottedLine",
$(
go.Link,
{
selectable: true,
selectionAdornmentTemplate: linkSelectionAdornmentTemplate
},
{
relinkableFrom: true,
relinkableTo: true,
reshapable: true
},
{
routing: go.Link.AvoidsNodes,
curve: go.Link.JumpOver,
corner: 5,
toShortLength: 4
},
$(go.Shape, {
isPanelMain: true,
strokeWidth: 2,
strokeDashArray: [3, 3]
}),
$(go.Shape, {
toArrow: "Standard",
stroke: null
}),
$(
go.Panel,
"Auto",
$(
go.Shape,
"RoundedRectangle",
new go.Binding("fill", "text", function(v) {
return v ? "#F8F8F8" : null;
}),
{
stroke: null,
fill: null
}
),
$(
go.TextBlock,
{
segmentIndex: 1,
segmentFraction: 0.5,
textAlign: "center",
font: "10pt helvetica, arial, sans-serif",
stroke: "blue",
margin: 2,
minSize: new go.Size(10, NaN)
// editable: true
},
new go.Binding("text").makeTwoWay()
)
)
)
);

$(go.Shape, "Rectangle", { width: 40, height: 60, margin: 4, fill: null, strokeWidth: 2, strokeDashArray: [6, 6, 2, 2] }),

myDiagram.nodeTemplate = $(
go.Node,
"Spot",
$(
go.Panel,
"Auto",
{ name: "PANEL" },
new go.Binding("desiredSize", "size", go.Size.parse).makeTwoWay(go.Size.stringify),
$(
go.Shape,
"Rectangle",
{
portId: "",
fromLinkable: true,
toLinkable: true,
cursor: "pointer",
fill: "white",
stroke: "black",
strokeWidth: 1
},
new go.Binding("figure"),
new go.Binding("strokeDashArray"),
new go.Binding("fill")
),
)

selectionChanged: function(eventPart) {
var dom = $$(".my-diagram-div canvas");
dom.unbind("click", myFunction).bind("click", myFunction);
function myFunction(e) {
let position = {
x: e.clientX,
y: e.clientY
};
options.changeNodeSelection(eventPart.data, position);
dom.unbind("click", myFunction);
}
}

let canvas = $(".my-diagram-div");
let selectHandlerDom = $('.select-handler');
canvas.on('input propertychange','textarea',e => {
selectHandlerDom.css({
top:position.y + 20 +'px',
left:position.x - 20 +'px',
'z-index':10000
});
this.filterHandlerOptions(e.target.value);
})
selectHandlerDom.unbind('click').on('click','li',e => {
let val = $(e.target).text()
this.myDiagram.model.setDataProperty(data, 'text',val);
canvas.find('textarea').val(val); })
canvas.click(e => {
selectHandlerDom.css({
'z-index':-1
})
})

layout: $(go.TreeLayout, { angle: 90 }),

layout: $(go.LayeredDigraphLayout, { isInitial: false, direction: 90, columnSpacing: 50, isOngoing: false, layerSpacing: 50 }),

$(
go.TextBlock,
{
font: "bold 11pt Helvetica, Arial, sans-serif",
margin: 8,
maxSize: new go.Size(300, NaN),
wrap: go.TextBlock.WrapFit,
editable: true,
textEdited: function(textBlock, previousText, currentText) {
console.log(textBlock,textBlock.part.data);
options.changeNodeSelection(textBlock.part.data);
}
}, new go.Binding("text").makeTwoWay()
)

downLoadImage(name) {
// 不设置,下载的图片残缺不全
// this.myDiagram.autoScale = go.Diagram.Uniform;
var a = document.createElement("a");
a.href = this.myDiagram.makeImageData({
scale: 1,
type: "image/png",
maxSize: new go.Size(Infinity, Infinity)
});
a.download = name;
a.click();
},

myDiagram.nodeTemplate =
$(go.Node, "Horizontal",
{
deletable: false,
selectable: false,
isTreeExpanded: false,//折叠全部子节点
// toolTip: tooltiptemplate,
}, myDiagram.addDiagramListener("InitialLayoutCompleted", function (e) {
if (EditType != 'export') {
// 只展示一级菜单
e.diagram.findTreeRoots().each(function (r) { r.expandTree(2) });
}
});

myDiagram.add(
$(go.Part, "Table",
{ position: new go.Point(300, 10), selectable: false },
$(go.TextBlock, "Key",
{ row: 0, font: "700 14px Droid Serif, sans-serif" }), // end row 0
$(go.Panel, "Horizontal",
{ row: 1, alignment: go.Spot.Left },
$(go.Shape, "Rectangle",
{ desiredSize: new go.Size(30, 30), fill: bluegrad, margin: 5 }),
$(go.TextBlock, "Males",
{ font: "700 13px Droid Serif, sans-serif" })
), // end row 1
$(go.Panel, "Horizontal",
{ row: 2, alignment: go.Spot.Left },
$(go.Shape, "Rectangle",
{ desiredSize: new go.Size(30, 30), fill: pinkgrad, margin: 5 }),
$(go.TextBlock, "Females",
{ font: "700 13px Droid Serif, sans-serif" })
) // end row 2
));

myDiagram.nodeTemplate =
$(go.Node, "Auto",
{ deletable: false, toolTip: tooltiptemplate },
new go.Binding("text", "name"),
$(go.Shape, "Rectangle",
{
fill: "orange",
stroke: "black",
stretch: go.GraphObject.Fill,
alignment: go.Spot.Center
},
new go.Binding("fill", "gender", genderBrushConverter)),
$(go.Panel, "Vertical",
$(go.TextBlock,
{
font: "bold 8pt Helvetica, bold Arial, sans-serif",
alignment: go.Spot.Center,
margin: 6
},
new go.Binding("text", "name")),
$(go.TextBlock,
new go.Binding("text", "kanjiName"))
)
);

myDiagram.nodeTemplate = $(
...
$("TreeExpanderButton", { alignment: go.Spot.Right, alignmentFocus: go.Spot.Left, "ButtonBorder.figure": "Rectangle" })
...

// define the Node template, representing an entity
myDiagram.nodeTemplate =
$(go.Node, "Auto", // the whole node panel
{
selectionAdorned: true,
resizable: true,
layoutConditions: go.Part.LayoutStandard & ~go.Part.LayoutNodeSized,
fromSpot: go.Spot.AllSides,
toSpot: go.Spot.AllSides,
isShadowed: true,
shadowColor: "#C5C1AA"
},
new go.Binding("location", "location").makeTwoWay(),
// whenever the PanelExpanderButton changes the visible property of the "LIST" panel,
// clear out any desiredSize set by the ResizingTool.
new go.Binding("desiredSize", "visible", function(v) { return new go.Size(NaN, NaN); }).ofObject("LIST"),
// define the node's outer shape, which will surround the Table
$(go.Shape, "Rectangle",
{ fill: lightgrad, stroke: "#756875", strokeWidth: 3 }),
$(go.Panel, "Table",
{ margin: 8, stretch: go.GraphObject.Fill },
$(go.RowColumnDefinition, { row: 0, sizing: go.RowColumnDefinition.None }),
// the table header
$(go.TextBlock,
{
row: 0, alignment: go.Spot.Center,
margin: new go.Margin(0, 14, 0, 2), // leave room for Button
font: "bold 16px sans-serif"
},
new go.Binding("text", "key")),
// the collapse/expand button
$("PanelExpanderButton", "LIST", // the name of the element whose visibility this button toggles
{ row: 0, alignment: go.Spot.TopRight }),
// the list of Panels, each showing an attribute
$(go.Panel, "Vertical",
{
name: "LIST",
row: 1,
padding: 3,
alignment: go.Spot.TopLeft,
defaultAlignment: go.Spot.Left,
stretch: go.GraphObject.Horizontal,
itemTemplate: itemTempl
},
new go.Binding("itemArray", "items"))
) // end Table Panel
); // end Node

myDiagram.nodeTemplateMap.add("Recycle",
$(go.Node, "Auto",
{
portId: "to", toLinkable: true, deletable: false,
layerName: "Background", locationSpot: go.Spot.Center
},
new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
{ dragComputation: function(node, pt, gridpt) { return pt; } },
{ mouseDrop: function(e, obj) { myDiagram.commandHandler.deleteSelection(); } },
$(go.Shape,
{ fill: "lightgray", stroke: "gray" }),
$(go.TextBlock, "Drop Here\nTo Delete",
{ margin: 5, textAlign: "center" })
));

function makeTooltip(str) {
// a helper function for defining tooltips for buttons
return $("ToolTip",
$(go.TextBlock, str));
}

myDiagram.groupTemplate =
$(go.Group, "Auto",
{ // define the group's internal layout
layout: $(go.TreeLayout,
{ angle: 90, arrangement: go.TreeLayout.ArrangementHorizontal, isRealtime: false }),
// the group begins unexpanded;
// upon expansion, a Diagram Listener will generate contents for the group
isSubGraphExpanded: false,
// when a group is expanded, if it contains no parts, generate a subGraph inside of it
subGraphExpandedChanged: function(group) {
if (group.memberParts.count === 0) {
randomGroup(group.data.key);
}
}
},
$(go.Shape, "Rectangle",
{ fill: null, stroke: "gray", strokeWidth: 2 }),
$(go.Panel, "Vertical",
{ defaultAlignment: go.Spot.Left, margin: 4 },
$(go.Panel, "Horizontal",
{ defaultAlignment: go.Spot.Top },
// the SubGraphExpanderButton is a panel that functions as a button to expand or collapse the subGraph
$("SubGraphExpanderButton"),
$(go.TextBlock,
{ font: "Bold 18px Sans-Serif", margin: 4 },
new go.Binding("text", "key"))
),
// 设置 go.Placeholder 对象的目的是, 让组自适应内部节点的大小;
$(go.Placeholder,
{ padding: new go.Margin(0, 10) })
) // end Vertical Panel
); // end Group

myDiagram.model.addNodeData({ key: name, isGroup: true, group: group });

var inspector = new Inspector("myInfo", myDiagram, {
properties: {
// key would be automatically added for nodes, but we want to declare it read-only also:
"key": { readOnly: true, show: Inspector.showIfPresent },
// fill and stroke would be automatically added for nodes, but we want to declare it a color also:
"fill": { show: Inspector.showIfPresent, type: 'color' },
"stroke": { show: Inspector.showIfPresent, type: 'color' }
}
});

var removeLinks=[];
//首先拿到这个节点的对象
var node = myDiagram.findNodeForKey('key');
//获取节点所有线
node.findLinksConnected().each(function(link) { 
     removeLinks.push(link.data);
    }
 );
myDiagram.model.removeLinkDataCollection(removeLinks);

myDiagram.addDiagramListener("LinkDrawn",function(e){
(e.subject.data ) //这是这个线条的数据
}) ;

diagram.addModelChangedListener(function(evt) {
// ignore unimportant Transaction events
if (!evt.isTransactionFinished) return;
var txn = evt.object; // a Transaction
if (txn === null) return;
// iterate over all of the actual ChangedEvents of the Transaction
txn.changes.each(function(e) {
// ignore any kind of change other than adding/removing a node
if (e.modelChange !== "nodeDataArray") return;
// record node insertions and removals
if (e.change === go.ChangedEvent.Insert) {
console.log(evt.propertyName + " added node with key: " + e.newValue.key);
} else if (e.change === go.ChangedEvent.Remove) {
console.log(evt.propertyName + " removed node with key: " + e.oldValue.key);
}
});
});

myDiagram.findNodeForKey(key).data //key值是节点的key

let nodeData={ text: "Start", figure: "Ellipse", fill: "#00AD5F", info: "", type: "start" };

myDiagram.model.addNodeData(nodeData); // 须有位置信息

myDiagram.remove(part）

let linkData ={ from: newnode.data.key, to: oldnode.data.key, text: "true", side: "Left", isHighlighted:false};

myDiagram.model.addLinkData(linkData); // linkData是连线数据

key.findNodesOutOf()

myDiagram.model.toJson(); // 得到结果为json字符串

myDiagram.model = go.Model.fromJson(model); // 传入参数model为json字符串

var node=myDiagram.findNodeForKey('key');

var nodeData=myDiagram.model.findNodeDataForKey('key');

var nodes=myDiagram.nodes;
//遍历输出节点对象
nodes.each(function (node) {
console.log(node.data.text);
});

node.findTreeChildrenNodes().each(function(cNode) {
console.log(cNode.data)
});

var node=myDiagram.findNodeForKey('key');node.findLinksConnected().each(function(link) {console.log(link.data)});

var node=myDiagram.findNodeForKey('key');node.findLinksOutOf().each(function(link) {console.log(link.data)});

// 修改单个节点属性
myDiagram.model.updateTargetBindings(node.data) // 批量修改节点属性
myDiagram.model.nodeDataArray
myDiagram.model.linkDataArray
//修改完成调用以下方法完成重建
myDiagram.rebuildParts()

// 更新方式一
let curDataNode = myDiagram.model.findNodeDataForKey(this.clickNodeKey);
curDataNode.nodeItem = this[obj.type + "Info"];
myDiagram.model.updateTargetBindings(curDataNode);
// 更新方式二
myDiagram.model.setDataProperty(curNode, "data", curNode.data);
console.log("curNode.data", curNode.data);