@will wrote:
here are two question:
i mark on the pic.
1.how to make the line straight?
2.how to put the line dot in the middle.
i hope you can know what i wrote.
<script type="text/javascript" language="javascript"> $(document).ready(function() { init(); }); function init() { var $ = go.GraphObject.make; // for conciseness in defining templates myDiagram = $(go.Diagram, "svgDIV", // must be the ID or reference to div { initialAutoScale: go.Diagram.Uniform, layout: $(go.LayeredDigraphLayout, { direction: 90, layerSpacing:1, setsPortSpots: true }), "toolManager.mouseWheelBehavior": go.ToolManager.WheelZoom, }); function findColumnDefinitionForName(nodedata, attrname) { var columns = nodedata.columnDefinitions; for (var i = 0; i < columns.length; i++) { if (columns[i].attr === attrname) return columns[i]; } return null; } var textTemplate = $(go.Node, "Auto", $(go.Shape, "Rectangle", { fill: null,stroke: null,stretch: go.GraphObject.Fill, alignment: go.Spot.Center }), $(go.TextBlock, { width: 45,wrap: go.TextBlock.WrapFit ,font: " 8pt sans-serif", textAlign: "center" }, new go.Binding("text", "name")) ); var rootTemplate = $(go.Node, "Auto", { selectionAdorned: true},new go.Binding("location", "loc", go.Point.parse), $(go.Shape, "RoundedRectangle", { width: 100, height: 25, margin: 4, fill: null, stroke: "#000000" }, new go.Binding("fill", "color")), $(go.TextBlock, { margin: 15, font: "bold 8pt sans-serif", stroke: "#8B0000",alignment: go.Spot.Center, font: "12pt sans-serif" }, new go.Binding("text", "name")) ); var pcsTemplate = $(go.Node, "Horizontal", $(go.Panel, "Auto", $(go.Shape, "Rectangle", { portId: "", fromSpot: new go.Spot(1, 0.35), toSpot: new go.Spot(0, 0.35), fill: null, stroke: null}, new go.Binding("fill", "blue"),new go.Binding("background", "statusBGC")), $(go.Picture, { maxSize: new go.Size(80, 40) }, new go.Binding("source", "img")) ) ); var lbsTemplate = $(go.Node, "Horizontal", // going into at middle-left $(go.TextBlock, { width: 35,wrap: go.TextBlock.WrapFit ,stroke: "#000000",alignment: go.Spot.Center, font: "8pt sans-serif",margin: new go.Margin(0, 0, 0, 0) }, new go.Binding("text", "name")), $(go.Panel, "Auto", $(go.Shape, "Rectangle", { portId: "", fromSpot: new go.Spot(1, 0.35), toSpot: new go.Spot(0, 0.35), fill: null, stroke: null}, new go.Binding("fill", "blue") ), $(go.Picture, { maxSize: new go.Size(25, 37) }, new go.Binding("source", "img")) ) ); var imageTemplate = $(go.Node, "Horizontal", $(go.Panel, "Auto", $(go.Shape, "Rectangle", { portId: "", fromSpot: new go.Spot(1, 0.35), toSpot: new go.Spot(0, 0.35), fill: null, stroke: null}, new go.Binding("fill", "blue")), $(go.Picture, { maxSize: new go.Size(40, 20) }, new go.Binding("source", "img"),new go.Binding("background", "statusBGC")) ) ); var caseTemplate = $(go.Node, "Horizontal",{ selectionAdorned: true }, $(go.Panel, "Table", new go.Binding("itemArray", "casedata"), { name: "CASETABLE", defaultAlignment: go.Spot.Left, itemTemplate: $(go.Panel, "TableRow", new go.Binding("background", "back"), $(go.Picture, new go.Binding("source", "img1"),new go.Binding("background", "statusBGC1"), { toolTip: $(go.Adornment, "Auto", $(go.Shape, { fill: "#FFFFCC" }), $(go.TextBlock, { margin: 3,font: "8pt sans-serif" }, new go.Binding("text", "name1")) ) // end of Adornment }, { column: 0, margin: 2, width: 60, height: 80, margin: 2, imageStretch: go.GraphObject.Fill,maxSize: new go.Size(20, 15)}), $(go.Picture, new go.Binding("source", "img2"),new go.Binding("background", "statusBGC2"), { toolTip: $(go.Adornment, "Auto", $(go.Shape, { fill: "#FFFFCC" }), $(go.TextBlock, { margin: 3,font: "8pt sans-serif" }, new go.Binding("text", "name2")) ) // end of Adornment }, { column: 1, margin: 2, width: 60, height: 80, margin: 2, imageStretch: go.GraphObject.Fill,maxSize: new go.Size(20, 15)}) ) // end of itemTemplate }) ); var templmap = new go.Map("string", go.Node); templmap.add("root", rootTemplate); templmap.add("text", textTemplate); templmap.add("pcs", pcsTemplate); templmap.add("lbs", lbsTemplate); templmap.add("image", imageTemplate); templmap.add("case", caseTemplate); myDiagram.nodeTemplateMap = templmap; myDiagram.linkTemplate = $(go.Link, { routing: go.Link.AvoidsNodes, corner: 0 }, { relinkableFrom: true, relinkableTo: true }, $(go.Shape,{ fill: "red" ,stroke: "red", strokeWidth: 1 }), $(go.Shape, {strokeWidth:0 ,stroke: "red",fill: "transparent" }) ); myDiagram.model = new go.GraphLinksModel( [ // node data { key: "root", name: "系統", color: "#97FFFF", category: "root", "loc":"450 540"}, { key: "kv22", name: "KV22", color: "#97FFFF", category: "root", "loc":"450 240"}, { key: "DS1", name: "DS", category: "lbs", img: "img/tranceNO0.png", "loc":"450 240" }, { key: "PCS", name: "", category: "pcs" ,img: "img/pcsTopNo.png"}, { key: "VCB", name: "DS", category: "lbs", img: "img/tranceON1.png" }, //{ key: "DS1", name:"DS1", category: "vcb", name1:"DS", img1: "img/tranceNO0.png",name2:"", img2: "img/pcsTopNo.png", name3:"VCB 52S", img3: "img/tranceON1.png"}, { key: "PCS1", name: "", category: "pcs", img: "img/pcsTopNo.png" }, { key: "LBS1", name: "LBS 89T1", category: "lbs", img: "img/PCSON.png" }, { key: "PCSIMAGE1", name: "", category: "image", img: "img/pcsImage.png", statusBGC:"#1F9150"}, { key: "CASE1", name: "", category: "case", casedata: [ { img1: "img/caseSell.png", statusBGC1:"#1F9150",name1:"1-1", img2: "img/caseSell.png", statusBGC2:"#1F9150",name2:"1-2"}, { img1: "img/caseSell.png", statusBGC1:"#1F9150",name1:"1-3", img2: "img/caseSell.png", statusBGC2:"#1F9150",name2:"1-4"}, { img1: "img/caseSell.png", statusBGC1:"#1F9150",name1:"1-5", img2: "img/caseSell.png", statusBGC2:"#1F9150",name2:"1-6"}, { img1: "img/caseSell.png", statusBGC1:"#1F9150",name1:"1-7", img2: "img/caseSell.png", statusBGC2:"#1F9150",name2:"1-8"}, { img1: "img/caseSell.png", statusBGC1:"#1F9150",name1:"1-9", img2: "img/caseSell.png", statusBGC2:"#1F9150",name2:"1-10"}, { img1: "img/caseSell.png", statusBGC1:"#1F9150",name1:"1-11", img2: "img/caseSell.png", statusBGC2:"#1F9150",name2:"1-12"} ] }, { key: "PCS2", parent: "DS1", category: "pcs", img: "img/pcsTopNo.png"}, { key: "LBS2", parent: "PCS2", name: "LBS 89T2", category: "lbs", img: "img/PCSON.png"}, { key: "PCSIMAGE2", parent: "LBS2", name: "", category: "image", img: "img/pcsImage.png", statusBGC:"#1F9150"}, { key: "CASE2", parent: "PCSIMAGE2", name: "", category: "case", casedata: [ { img1: "img/caseSell.png", statusBGC1:"#1F9150",name1:"2-1", img2: "img/caseSell.png", statusBGC2:"#1F9150",name2:"1-2"}, { img1: "img/caseSell.png", statusBGC1:"#1F9150",name1:"2-3", img2: "img/caseSell.png", statusBGC2:"#1F9150",name2:"1-4"}, { img1: "img/caseSell.png", statusBGC1:"#1F9150",name1:"2-5", img2: "img/caseSell.png", statusBGC2:"#1F9150",name2:"1-6"}, { img1: "img/caseSell.png", statusBGC1:"#1F9150",name1:"2-7", img2: "img/caseSell.png", statusBGC2:"#1F9150",name2:"1-8"}, { img1: "img/caseSell.png", statusBGC1:"#1F9150",name1:"2-9", img2: "img/caseSell.png", statusBGC2:"#1F9150",name2:"1-10"}, { img1: "img/caseSell.png", statusBGC1:"#1F9150",name1:"2-11", img2: "img/caseSell.png", statusBGC2:"#1F9150",name2:"1-12"} ] }, //{ key: "PCS3T", name: "", category: "normal"}, { key: "LBS3-1", name: "LBS 89T3-1", category: "lbs", img: "img/PCSON.png"}, { key: "PCSIMAGE3-1", name: "", category: "image", img: "img/pcsImage.png", statusBGC:"#1F9150"}, { key: "CASE3", name: "", category: "case", casedata: [ { img1: "img/caseSell.png", statusBGC1:"#1F9150",name1:"3-1-1", img2: "img/caseSell.png", statusBGC2:"#1F9150",name2:"3-1-2"}, { img1: "img/caseSell.png", statusBGC1:"#1F9150",name1:"3-1-3", img2: "img/caseSell.png", statusBGC2:"#1F9150",name2:"3-1-4"}, { img1: "img/caseSell.png", statusBGC1:"#1F9150",name1:"3-1-5", img2: "img/caseSell.png", statusBGC2:"#1F9150",name2:"3-1-6"}, { img1: "img/caseSell.png", statusBGC1:"#1F9150",name1:"3-1-7", img2: "img/caseSell.png", statusBGC2:"#1F9150",name2:"3-1-8"}, { img1: "img/caseSell.png", statusBGC1:"#1F9150",name1:"3-1-9", img2: "img/caseSell.png", statusBGC2:"#1F9150",name2:"3-1-10"}, { img1: "img/caseSell.png", statusBGC1:"#1F9150",name1:"3-1-11", img2: "img/caseSell.png", statusBGC2:"#1F9150",name2:"3-1-12"} ] }, { key: "LBS3-2",name: "LBS 89T3-2", category: "lbs", img: "img/PCSON.png"}, { key: "PCSIMAGE3-2", name: "", category: "image", img: "img/pcsImage.png", statusBGC:"#1F9150"}, { key: "PCS3B", name: "", category: "pcs", img: "img/pcsTopNo.png"}, { key: "CASE4", name: "", category: "case", casedata: [ { img1: "img/caseSell.png", statusBGC1:"#1F9150",name1:"3-2-1", img2: "img/caseSell.png", statusBGC2:"#1F9150",name2:"3-2-2"}, { img1: "img/caseSell.png", statusBGC1:"#1F9150",name1:"3-2-3", img2: "img/caseSell.png", statusBGC2:"#1F9150",name2:"3-2-4"}, { img1: "img/caseSell.png", statusBGC1:"#1F9150",name1:"3-2-5", img2: "img/caseSell.png", statusBGC2:"#1F9150",name2:"3-2-6"}, { img1: "img/caseSell.png", statusBGC1:"#1F9150",name1:"3-2-7", img2: "img/caseSell.png", statusBGC2:"#1F9150",name2:"3-2-8"}, { img1: "img/caseSell.png", statusBGC1:"#1F9150",name1:"3-2-9", img2: "img/caseSell.png", statusBGC2:"#1F9150",name2:"3-2-10"}, { img1: "img/caseSell.png", statusBGC1:"#1F9150",name1:"3-2-11", img2: "img/caseSell.png", statusBGC2:"#1F9150",name2:"3-2-12"} ] }, { key: "PCS4", name: "", category: "pcs", img: "img/pcsTopNo.png"}, { key: "LBS4", name: "LBS 89T4", category: "lbs", img: "img/PCSON.png"}, { key: "PCSIMAGE4", name: "", category: "image", img: "img/pcsImage.png", statusBGC:"#1F9150"}, { key: "CASE5", name: "", category: "case", casedata: [ { img1: "img/caseSell.png", statusBGC1:"#1F9150",name1:"4-1", img2: "img/caseSell.png", statusBGC2:"#1F9150",name2:"4-2"}, { img1: "img/caseSell.png", statusBGC1:"#1F9150",name1:"4-3", img2: "img/caseSell.png", statusBGC2:"#1F9150",name2:"4-4"}, { img1: "img/caseSell.png", statusBGC1:"#1F9150",name1:"4-5", img2: "img/caseSell.png", statusBGC2:"#1F9150",name2:"4-6"}, { img1: "img/caseSell.png", statusBGC1:"#1F9150",name1:"4-7", img2: "img/caseSell.png", statusBGC2:"#1F9150",name2:"4-8"}, { img1: "img/caseSell.png", statusBGC1:"#1F9150",name1:"4-9", img2: "img/caseSell.png", statusBGC2:"#1F9150",name2:"4-10"}, { img1: "img/caseSell.png", statusBGC1:"#1F9150",name1:"4-11", img2: "img/caseSell.png", statusBGC2:"#1F9150",name2:"4-12"} ] }, //{ key: "PCS5T", name: "", category: "normal"}, { key: "LBS5-1", name: "LBS 89T5-1", category: "lbs", img: "img/PCSON.png"}, { key: "PCSIMAGE5-1", name: "", category: "image", img: "img/pcsImage.png", statusBGC:"#1F9150"}, { key: "CASE6", name: "", category: "case", casedata: [ { img1: "img/caseSell.png", statusBGC1:"#1F9150",name1:"5-1-1", img2: "img/caseSell.png", statusBGC2:"#1F9150",name2:"5-1-2"}, { img1: "img/caseSell.png", statusBGC1:"#1F9150",name1:"5-1-3", img2: "img/caseSell.png", statusBGC2:"#1F9150",name2:"5-1-4"}, { img1: "img/caseSell.png", statusBGC1:"#1F9150",name1:"5-1-5", img2: "img/caseSell.png", statusBGC2:"#1F9150",name2:"5-1-6"}, { img1: "img/caseSell.png", statusBGC1:"#1F9150",name1:"5-1-7", img2: "img/caseSell.png", statusBGC2:"#1F9150",name2:"5-1-8"}, { img1: "img/caseSell.png", statusBGC1:"#1F9150",name1:"5-1-9", img2: "img/caseSell.png", statusBGC2:"#1F9150",name2:"5-1-10"}, { img1: "img/caseSell.png", statusBGC1:"#1F9150",name1:"5-1-11", img2: "img/caseSell.png", statusBGC2:"#1F9150",name2:"5-1-12"}, { img1: "img/caseSell.png", statusBGC1:"#1F9150",name1:"5-1-13", img2: "img/caseSell.png", statusBGC2:"#1F9150",name2:"5-1-14"} ] }, { key: "LBS5-2", name: "LBS 89T5-2", category: "lbs", img: "img/PCSON.png"}, { key: "PCSIMAGE5-2", name: "", category: "image", img: "img/pcsImage.png", statusBGC:"#1F9150"}, { key: "PCS5B", name: "", category: "pcs", img: "img/pcsTopNo.png"}, { key: "CASE7", name: "", category: "case", casedata: [ { img1: "img/caseSell.png", statusBGC1:"#1F9150",name1:"5-2-1", img2: "img/caseSell.png", statusBGC2:"#1F9150",name2:"5-2-2"}, { img1: "img/caseSell.png", statusBGC1:"#1F9150",name1:"5-2-3", img2: "img/caseSell.png", statusBGC2:"#1F9150",name2:"5-2-4"}, { img1: "img/caseSell.png", statusBGC1:"#1F9150",name1:"5-2-5", img2: "img/caseSell.png", statusBGC2:"#1F9150",name2:"5-2-6"}, { img1: "img/caseSell.png", statusBGC1:"#1F9150",name1:"5-2-7", img2: "img/caseSell.png", statusBGC2:"#1F9150",name2:"5-2-8"}, { img1: "img/caseSell.png", statusBGC1:"#1F9150",name1:"5-2-9", img2: "img/caseSell.png", statusBGC2:"#1F9150",name2:"5-2-10"}, { img1: "img/caseSell.png", statusBGC1:"#1F9150",name1:"5-2-11", img2: "img/caseSell.png", statusBGC2:"#1F9150",name2:"5-2-12"}, { img1: "img/caseSell.png", statusBGC1:"#1F9150",name1:"5-2-13", img2: "img/caseSell.png", statusBGC2:"#1F9150",name2:"5-2-14"} ] }, { key: "PCSLAST1", category: "lbs", name:"DS 89R", img: "img/tranceNO1.png"}, { key: "PCSLAST2", category: "pcs", name:"aaaa", img: "img/pcsTopNo.png"}, { key: "PCSLAST3", category: "lbs", name:"VCB 52R", img: "img/tranceON1.png"}, { key: "PCSLAST4", category: "lbs", name:"VCB 52F", img: "img/tranceON1.png"}, { key: "PCSLAST5", category: "lbs", name:"VCB 52F", img: "img/tranceON1.png"}, { key: "PCSLAST6", category: "text", name:"5000KVA TR", img: "img/tranceON1.png"}, { key: "PCSLAST7", category: "text", name:"所内へ", img: "img/tranceON1.png"}, ], [ // link data { from: "root", to: "DS1" }, { from: "DS1", to: "PCS" }, { from: "PCS", to: "VCB" }, { from: "VCB", to: "LBS1" }, { from: "LBS1", to: "PCS1" }, { from: "PCS1", to: "PCSIMAGE1" }, { from: "PCSIMAGE1", to: "CASE1" }, { from: "VCB", to: "LBS2" }, { from: "LBS2", to: "PCS2" }, { from: "PCS2", to: "PCSIMAGE2" }, { from: "PCSIMAGE2", to: "CASE2" }, // { from: "DS1", to: "PCS3T" }, { from: "VCB", to: "LBS3-1" }, { from: "VCB", to: "LBS3-2" }, { from: "LBS3-1", to: "PCS3B" }, { from: "LBS3-2", to: "PCS3B" }, { from: "PCS3B", to: "PCSIMAGE3-1" }, { from: "PCS3B", to: "PCSIMAGE3-2" }, { from: "PCSIMAGE3-1", to: "CASE3" }, { from: "PCSIMAGE3-2", to: "CASE4" }, { from: "VCB", to: "LBS4" }, { from: "LBS4", to: "PCS4" }, { from: "PCS4", to: "PCSIMAGE4" }, { from: "PCSIMAGE4", to: "CASE5" }, //{ from: "DS1", to: "PCS5T" }, { from: "VCB", to: "LBS5-1" }, { from: "VCB", to: "LBS5-2" }, { from: "LBS5-1", to: "PCS5B" }, { from: "LBS5-2", to: "PCS5B" }, { from: "PCS5B", to: "PCSIMAGE5-1" }, { from: "PCS5B", to: "PCSIMAGE5-2" }, { from: "PCSIMAGE5-1", to: "CASE6" }, { from: "PCSIMAGE5-2", to: "CASE7" }, { from: "kv22", to: "PCSLAST1" }, { from: "PCSLAST1", to: "PCSLAST2" }, { from: "PCSLAST2", to: "PCSLAST3" }, { from: "PCSLAST3", to: "PCSLAST4" }, { from: "PCSLAST3", to: "PCSLAST5" }, { from: "PCSLAST4", to: "PCSLAST6" }, { from: "PCSLAST5", to: "PCSLAST7" }, ]); // force all lanes' layouts to be performed //relayoutLanes();} // end init
Posts: 2
Participants: 2