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'  }
}
});

問題は、供給要素を 1 回左クリックしても、ハイパーリンクが開かないことです。要素をドラッグして離したときにのみ、リンクが新しいタブで開きます。この問題を克服するために何ができるかを教えてください。を使用して、ユーザーによる要素のドラッグを無効にしました 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 に答える