我正在尝试使用edgeLabel插件https://github.com/jacomyal/sigma.js/tree/master/plugins/sigma.renderers.edgeLabels
这是我的档案:
<html>
<head>
<style type="text/css">
#container {
max-width: 400px;
height: 400px;
margin: auto;
}
</style>
</head>
<body>
<div id="container"></div>
<script src="sigma.js"></script>
<script src="sigma.parsers.json.js"></script>
<script src="sigma.renderers.edgeLabels/settings.js"></script>
<script src="sigma.renderers.edgeLabels/sigma.canvas.edges.labels.def.js"></script>
<script src="sigma.renderers.edgeLabels/sigma.canvas.edges.labels.curve.js"></script>
<script src="sigma.renderers.edgeLabels/sigma.canvas.edges.labels.curvedArrow.js"></script>
<script>
s = sigma.parsers.json('data.json', {
container: 'container',
renderer: {
type: 'canvas'
},
settings: {
defaultNodeColor: '#D3D3D3',
defaultEdgeColor: '#D3D3D3',
edgeLabelThreshold: 0,
edgeLabelSize: 'proportional'
}
});
</script>
</body>
</html>
我使用的数据:
{
"nodes": [
{
"id": "n0",
"label": "Data1",
"x": 0,
"y": 0,
"size": 10
},
{
"id": "n1",
"label": "Data2",
"x": 0,
"y": 2,
"size": 10
},
{
"id": "n2",
"label": "Merged data",
"x": 2,
"y": 1,
"size": 10
},
{
"id": "n3",
"label": "Cleaned data",
"x": 3,
"y": 1,
"size": 10
}
],
"edges": [
{
"id": "e0",
"label": "merge",
"source": "n0",
"target": "n2",
"line": "arrow",
"size": 20
},
{
"id": "e1",
"label": "merge",
"source": "n1",
"target": "n2",
"line": "arrow",
"size": 20
},
{
"id": "e2",
"label": "cleanAsync",
"source": "n2",
"target": "n3",
"line": "arrow",
"size": 20
}
]
}
我尝试在给定here
的示例文件中运行此数据它有效!
然而,当我用我自己的,非常相似的文件尝试这个时,它不起作用。
我在这里看到的唯一区别是示例文件自己导入所有内容而不是使用构建文件。但是,README声明您只需要导入文件夹中给出的4个文件,所以我很难过。
我并不是特别渴望浏览每个导入的文件,看看哪个包含了缺少edgeLabels的东西。控制台中不会抛出任何错误。