如何在jointJS - Rappid中更改图形的默认链接名称
如何在jointJS - Rappid中更改图形的默认链接名称
提问于 2017-01-30 22:49:55
在jointJS中新建的每个链接中，该链接上都有一个默认名称" name“。如何将其更改为我自己的名字，e.x。var测试的内容？
我的链接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' } } }
]
}),回答 1
Stack Overflow用户
发布于 2017-11-24 19:28:45
我有一个类似的用例，希望将source ports标签设置为链接的标签。使用文档中提供的任何示例都无法使其工作，但通过以下方式使其工作：
/**
* 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
});
} 页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/41938777
复制相关文章
相似问题
腾讯云开发者
