0

我正在使用joint.js 来生成服务流程图。我使用下面的代码片段来创建我的自定义元素。

// Create a custom element.
// ------------------------

joint.shapes.custom = {};
// The following custom shape creates a link out of the whole element.
joint.shapes.custom.ElementLink = joint.shapes.basic.Rect.extend({
// Note the `<a>` SVG element surrounding the rest of the markup.
markup: '<a><g class="rotatable"><g class="scalable"><rect/></g><text/></g></a>',
defaults: joint.util.deepSupplement({
    type: 'custom.ElementLink'
}, joint.shapes.basic.Rect.prototype.defaults)
});

// Create JointJS elements and add them to the graph as usual.
// -----------------------------------------------------------

var supply = new joint.shapes.custom.ElementLink({
position: { x: 200, y: 110 }, size: { width: 250, height: 60 },
attrs: {
    rect: { fill: '#3366ff', stroke: '#1d3d9e', 'stroke-width': 5 },
    a: { 'xlink:href': 'http://www.aamrofreight.net/supply-chain-management/', cursor: 'pointer' },
    text: { text: 'Supply Chain \nManagement', fill: 'white'  }
}
});

问题是在供应元素上单击左键，超链接不会打开。只有当我拖动并释放元素时，链接才会在新选项卡中打开。请建议我可以做些什么来克服这个问题。我已禁用用户拖动元素使用 var paper = new joint.dia.Paper({ el: $('#paper'), width: 1040, height: 1000, gridSize: 1, model: graph, interactive: false });

提前致谢！

4

1 回答 1

2

这是您的答案...您没有添加xlink:show': 'new'. 这就是它打不开的原因。

创建自定义形状...

joint.shapes.custom = {};

joint.shapes.custom.ElementLink = joint.shapes.basic.Rect.extend({
    // Note the `<a>` SVG element surrounding the rest of the markup.
    markup: '<a><g class="rotatable"><g class="scalable"><rect/></g><text/></g></a>',
    defaults: joint.util.deepSupplement({
        type: 'custom.ElementLink'
    }, joint.shapes.basic.Rect.prototype.defaults)
});

您的数据：

var supply = new joint.shapes.custom.ElementLink({
    position: { x: 200, y: 110 }, size: { width: 250, height: 60 },
    attrs: {
        rect: { fill: '#3366ff', stroke: '#1d3d9e', 'stroke-width': 5 },
        a: { 'xlink:href': 'http://www.aamrofreight.net/supply-chain-management/', 'xlink:show': 'new', cursor: 'pointer' },
        text: { text: 'Supply Chain \nManagement', fill: 'white'  }
    }

欲了解更多信息..检查这里：[ http://jointjs.com/tutorial/hyperlinks

我希望，它应该对你有用。

于 2015-05-27T12:54:05.253 回答