私はサイトスケープを使用して以下を生成しています。しかし、ノードを正確にクリックすると機能しませんが、オフセット(ノードまたはエッジから少し離れた場所)でクリックすると、クリックイベントが発生します。
下の図では、ノードまたはエッジを正確にクリックするとクリックイベントが発生しませんが、ノードとエッジから離れた赤と黒のドットをクリックするとクリックイベントが発生します。ノードをクリックすると起動したい(赤いペンで丸められている)。私を助けてください。
コード:
<div id="graphView" class="tabcontent" style="display:block;">
<div class="row" style="padding-top: 5px; text-align: left;">
<div id="graphDiv" class="col-sm-9 graphViewStyle"> </div>
<div id="toolTipDiv" class="col-sm-3" style="word-wrap: break-word; min-height:300px;max-height:300px;min-width:200px;overflow-y: auto;border:1px solid black;
border-bottom-left-radius:4px;border-bottom-right-radius:4px;border-top-left-radius:4px;border-top-right-radius:4px;">4678678678678678678ghjghj/n fghfgh</div>
</div>
</div>
Cytoscape js コード:
var cy = cytoscape({
//container: document.getElementById('graphView'),
container: document.getElementById('graphDiv'),
boxSelectionEnabled: false,
autounselectify: false,
zoomingEnabled: false,
autoungrabify: false,
style: cytoscape.stylesheet()
.selector('node')
.css({
'content': 'data(label)'
})
.selector('edge')
.css({
'target-arrow-shape': 'triangle',
'width': 4,
'line-color': '#ccc',
'target-arrow-color': '#ccc',
'curve-style': 'bezier',
'content': 'data(label)'
})
});
ここで、graphDiv は私の div であり、同じ div に他のコンポーネントはありません。