Мне нужно отобразить график с серией узлов, которые могут иметь несколько отношений между одним и другим. Чтобы показать каждое отношение (ребро), я добавил плагин ParallelEdges. Моя проблема в том, что, когда я устанавливаю enableEdgeHovering в true, я вижу, что наведение курсора мыши происходит на пару пикселей от того места, где фактически отображается край на холсте, что делает невозможным взаимодействие с отношением.
Ниже приведен фрагмент моего кода:
<html>
<body>
<div id="viz"></div>
</body>
<script type="text/javascript" src="Scripts/sigma.min.js"></script>
<script type="text/javascript" src="Scripts/plugins/sigma.renderers.edgeLabels.min.js"></script>
<script type="text/javascript" src="Scripts/plugins/sigma.layout.forceAtlas2.min.js"></script>
<script type="text/javascript" src="Scripts/plugins/sigma.renderers.parallelEdges.min.js"></script>
<script type="text/javascript" src="Scripts/plugins/sigma.plugins.dragNodes.min.js"></script>
<script>
var data = myJsonPassedFromServer;
// Initialise sigma:
var s = new sigma(
{
renderer: {
container: document.getElementById('viz'),
type: 'canvas'
},
settings: {
minEdgeSize: 0.1,
maxEdgeSize: 2,
minNodeSize: 1,
maxNodeSize: 8,
enableEdgeHovering: true,
singleHover:true,
}
}
);
// Load the graph in sigma
s.graph.read(data);
// Ask sigma to draw it
s.refresh();
// Log the data when an edge is clicked.
s.bind('clickEdge', function (e) {
var edgeProperties = e.data.edge.Properties.Properties;
if (typeof edgeProperties.objId !== "undefined" && typeof edgeProperties.lop !== "undefined") {
var objId = edgeProperties.objId;
var lop = edgeProperties.lop;
var link = "Default.aspx?Dialog=true#ViewID=SCE_Pgh&ObjId=" + objId + "&LoP=" + lop;
window.open(link);
}
console.log(e.data);
});
</script>
</html>