Question

我正在使用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 });

提前致谢！

Answer 1

这是你的回答...... 你没有添加xlink:show': 'new'。这就是为什么它没有开放。

创建自定义shap ...

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

我希望，它应该适合你。

超链接在用户可拖动元素中的joint.js中不起作用

1 个答案: