以反应形状插入数据的Jsplumb对话框

Question

我想在jsplumb的节点形状中插入数据，我已经尝试过叠加属性海关叠加，但是在Google上没有可用的示例，我想使用Reactjs库来实现这一点。JsPlumb中是否有任何内置函数可以在其中插入数据JsPlumb的形状，或者我需要为此编写自己的函数，请回答我Professionals

Answer 1

您需要在数据的哪一部分放置数据：

• 在源/目标元素处或
• 在连接的端点/连接器处？

如果要将数据放在源/目标元素上，请将它们放在代表源/目标的div元素上。覆盖物用于端点和连接器。这是一个示例代码：

    jsPlumb.ready(function () {
        var instance1 = jsPlumb.getInstance({
            //Container: "diagramcontainer",    
            PaintStyle:{ 
                strokeWidth:6, 
                stroke:"#567567", 
                outlineStroke:"black", 
                outlineWidth:1 
            },
            Connector:"Straight",
            Endpoint:[ "Dot", { radius:5 } ],
            EndpointStyle : { fill: "#567567"  },
            Anchors : [ "RightMiddle", "LeftMiddle" ],
        });

        instance1.connect({ 
            source:"manager1", 
            target:"supervisor1", 
            overlays: [
                ["Arrow", {location:1}],
                ["Label", {label:"Direct Connection with data", labelStyle: {fill: "skyblue", color: "white"}, id:"myLabel1"}]
            ],
        });


        var instance2 = jsPlumb.getInstance({
            //Container: "diagramcontainer",    
            PaintStyle:{ 
                strokeWidth:6, 
                stroke:"#567567", 
                outlineStroke:"black", 
                outlineWidth:1 
            },
            Connector:"Straight",
            Endpoint:[ "Dot", { radius:5 } ],
            EndpointStyle : { fill: "#567567"  },
            Anchors : [ "RightMiddle", "LeftMiddle" ],
        });

        let container = document.querySelector("#diagramcontainer")
        instance2.connect({ 
            source:"manager2", 
            target:"supervisor2", 
            overlays:[
                ["Custom", {                        
                    create:function(container) {                            
                        const el = document.createElement("input")
                        el.setAttribute("type","text")
                        el.setAttribute("value","Budget Flow")
                        el.setAttribute("readonly","")
                        return el
                    },
                    //location:0,
                    id:"customOverlay"
                }]
            ]               
        });
    });     

用于渲染源和目标的反应元素：

        <div id="diagramcontainer" ref={el => this.el = el} className="statemachine-demo" style={{height: "400px"}}>
            <div className="w" id="manager1"    style={{left: "10em", top: "12em", width: "10em", height: "5em"}}>
                Manager<p>Budget : 1000</p>
            </div>
            <div className="w" id="supervisor1" style={{left: "35em", top: "12em", width: "10em", height: "5em"}}>
                Supervisor<p>Budget : 5000</p>
            </div>

            <div className="w" id="manager2"    style={{left: "10em", top: "20em", width: "10em", height: "5em"}}>
                Manager<p>Budget : 1000</p>
            </div>
            <div className="w" id="supervisor2" style={{left: "35em", top: "20em", width: "10em", height: "5em"}}>
                Supervisor<p>Budget : 5000</p>
            </div>                
        </div>

官方文档提供了出色的解释，并提供了一些有关使用库such as for overlay 的示例。