Question

在jointJS中的每个新创建的链接中，通过此链接有默认名称“Name”。我将如何将其更改为我自己的名字，e.x。变量测试的内容？

我的链接javascript代码如下：

//New Transition
        this.paper = new joint.dia.Paper({
            width: 1000,
            height: 1000,
            gridSize: 10,
            model: this.graph,
            defaultLink: new joint.dia.Link({ 



                //Code alteration to mimic label functionality-adding labels:

                attrs: {
                    '.marker-source': { d: 'M 10 0 L 0 5 L 10 10 z', transform: 'scale(0.001)' }, // scale(0)(0.001)' }, // scale(0) fails in Firefox
                    '.marker-target': { d: 'M 10 0 L 0 5 L 10 10 z' },
                    '.connection': { stroke: 'black' }
                },
                router: { name: 'manhattan' },
        labels:[
        { position: 0.5, attrs: { text: { text: 'Name' } } }
        ]
            }),

Answer 1

我有一个类似的用例，并希望将源端口标签设置为链接的标签。无法使用文档中提供的任何示例，但是通过以下方式使其工作：

            /**
             * Function Creates the default link for the flow chart
             */
            function createLink() {
                var link = new joint.dia.Link({
                    attrs: { ".marker-target": { d: "M 10 0 L 0 5 L 10 10 z" } },
                    labels: [{
                        position: 0.5,
                        attrs: {
                            '.connection': { stroke: 'blue' },
                        }
                    }]
                });
                return link;
            }

        // Function creates a paper for the graph with default overrides if required any 
        function newDiagram(height, width, gridSize, graph) {
            return new joint.dia.Paper({
                width: width,
                height: height,
                gridSize: gridSize,
                model: graph,
                linkPinning: false,
                defaultLink: function (cellView, magnet, link) {
                    var link = createLink();

                    // Short hack for setting label name from port
                    link.prop(['labels', 0, 'attrs', 'text', 'text'], magnet.getAttribute('port'));

                    return link;
                },
                interactive: {
                    vertexAdd: false
                },
                validateConnection: function (cellViewS, magnetS, cellViewT, magnetT, end, linkView) {
                    // Prevent linking from input ports.
                    if (magnetS && magnetS.getAttribute("port-group") === "in") return false;
                    // Prevent linking from output ports to input ports within one element.
                    if (cellViewS === cellViewT) return false;
                    // Prevent linking to input ports.
                    return magnetT && magnetT.getAttribute("port-group") === "in";
                },
                // Enable marking available cells & magnets
                markAvailable: true
            });
        }

如何更改jointJS - Rappid中图形的默认链接名称

1 个答案: