gojs使用textBlock添加背景

引入：

在html中设置一容器

 <div id="myDiagramDiv" style="background-color: white; border: solid 1px black; width: 100%; height: 400px"></div>

script 引入

<script src="./assets/plugins/gojs/go.js"></script>   

 var $go = go.GraphObject.make;  // for conciseness in defining templates in this function
            myDiagram =$go(go.Diagram, "myDiagramDiv",  // must be the ID or reference to div
                    { initialContentAlignment: go.Spot.Center });
            // define all of the gradient brushes
            function nodeTypeImage(type) {
                switch (type) {
                    case "trunk": return "./assets/imgs/device.png";
                    case "Linka": return "./assets/imgs/linka.png";
                    case "Linkb": return "./assets/imgs/linkb.png";
                    case "center": return "./assets/imgs/seting.png";
                    case "work": return "./assets/imgs/set.png";
                    case "taskWrong": return "./assets/imgs/wrong.png";
                    case "deviceWrong": return "./assets/imgs/error.png";
                    case "deviceTask": return "./assets/imgs/wrongTask.png";
                }
            };
            // define the Node template for non-terminal nodes
            myDiagram.nodeTemplate =
                $go(go.Node, "Vertical",
                    // define the node's outer shape
                    $go(go.Picture,
                        { margin: 0, width: 60, height: 60,
                            imageStretch: go.GraphObject.None},
                        // new go.Binding("source")),
                        new go.Binding("source", "type", nodeTypeImage)),
                    // define the node's text
                    $go(go.TextBlock,//给textBlock添加点击事件
                        { alignment: go.Spot.Bottom, font: " 10pt Sans-Serif",
                            isMultiline: true,width:90,
                            wrap: go.TextBlock.WrapFit,
                            verticalAlignment: go.Spot.Bottom,
                            stroke:'#169BD5',
                            textAlign: "center",
                            click: function(ev, obj) {
                                if(obj.part.data.wrong==="taskWrong"){
                                 
                                }if(obj.part.data.wrong==='preWrong'){
                                   
                                }
                            }
                        },
                        new go.Binding("text", "text")),
                        $go("TreeExpanderButton")
                    );
            // define the Link template
            myDiagram.linkTemplate =
                $go(go.Link,  // the whole link panel
                    { selectable: false },
                    { routing: go.Link.Orthogonal, corner: 5, selectable: false },// the link style
                    $go(go.Shape, { strokeWidth: 2, stroke: 'lightblue' }),
                    $go(go.TextBlock, { textAlign: "center",stroke:"red" },  // centered multi-line text
                        new go.Binding("text", "text")),
                    $go(go.Picture,  //连线处添加背景图片
                        { margin: 0, width: 20, height: 40,
                            imageStretch: go.GraphObject.None
                            // segmentIndex: 1, segmentFraction: 0
                        },
                        // new go.Binding("source")),
                        new go.Binding("source", "type", nodeTypeImage))
                )  // the link shape
            // create the model for the double tree
            var nodeDataArray = [
                { key: "Root",text:"任务名称",type:"center",dir: "right"},
                { key: "L1",text:"省份1",type:"trunk",dir: "left", wrong:"preWrong",color:"red"},
                { key: "L2",text:"地市",type:"trunk",dir: "left"},
                { key: "L3",text:"地市",type:"trunk",dir: "left"},
                { key: "L4",text:"测试终端1",type:"trunk", dir: "left"},
                { key: "R2",text:"PING业务", type:"work",dir: "right"},
                { key: "R3",text:"三方出口域名",type:"Linka"},
                { key: "R4",text:"集团骨干域名", type:"Linka"},
                { key: "R5",text:"121.12.221.15（电信出口)", type:"Linkb"},
                { key: "R6",text:"121.12.221.23（联通出口)",wrong:"taskWrong",type:"Linkb"}
            ];
            var linkDataArray = [
                { from:"Root", to:"L1", type: "" },
                { from:"L1", to:"L2", type: "deviceTask" },
                { from:"L1", to:"L3", type: "" },
                { from:"L3", to:"L4", type: "" },
                { from:"Root", to:"R2", type: "" },
                { from:"R2", to:"R3", type: "" },
                { from:"R2", to:"R4", type: "" },
                { from:"R3", to:"R5", type: "" },
                { from:"R3", to:"R6", type: "deviceWrong"}
            ];
            myDiagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);

效果图：