如何将两种不同的类型应用于 sigma.js 中的边缘

Question

我正在尝试在 sigma.js 图形 DOTTED 和 CURVED 中绘制边。我正在使用 customEdgeShapes 和 curve 插件，但我无法在同一条边上组合两种不同的样式。事实上，我只能将单一样式应用于 type 属性：

edge.type = 'curvedArrow';

或

edge.type = 'dotted';

如何将两种样式应用到一条边上？

Answer 1

我已经使用 Sigma.js 一两个星期了，我认为有几种方法可以满足您的需求。我已经使用这种方法根据属性区分节点颜色。下面的代码写在我的（困惑）头顶上，因此未经测试，可能是错误的。

第一种方法是当你推动边缘开始构建图形时（在我的例子中，推动是通过采用包含所有节点和边缘的 JSON-argument 并开始解析它们来制作我的 sigma 实例).这是通过创建一个函数来实现的，该函数接受一个条件，您可以用它来确定它是一条线还是虚线。

function determinetype(determinator){
  if (determinator === "parent"){return "dotted"}
  else if (determinator === "grandparent"){return "line"}
};

for (var i = 0; i<graph.edges.length; i++){
  var edgetype = determinetype(graph.edges[i]["conditional_markup"]);
  g.edges.push({
    id:graph.edges[i]["id],
    source: graph.edges[i]["source"],
    target: graph.edges[i]["target"],
    type: edgetype,
  })
}

第二种方法是在绘制完所有边后对其进行迭代。你会再次想要创建一个函数，它接受一个参数（决定符）和 return 你想要的线条样式。

function get_type(determinator){
  if (determinator === "parent"){return "dotted"}
  else if (determinator === "grandparent"){return "line"}
};
  s.graph.edges().forEach(function(edge){
    edge.type = get_type(edge.conditional_markup);
  });

希望对您有所帮助。

Answer 2

“谢谢你的回答，但我想要一个既弯曲又点缀的边缘。也许唯一的方法是重写插件...... – rvandoni”

我需要类似的东西，是的，这似乎是唯一的方法。

为了缓解问题：

添加：

context.setLineDash([6,6]); // numbers describe length of drawn line then blank, so you may want different values.

在文件中：“sigma.canvas.edges.curvedArrow.js”

就在代码之前：

context.setLineDash([6,6]); // <---
context.strokeStyle = color;
context.lineWidth = size;
context.beginPath();
context.moveTo(sX, sY);
if (source.id === target.id) {
  context.bezierCurveTo(cp.x2, cp.y2, cp.x1, cp.y1, aX, aY);
} else {
  context.quadraticCurveTo(cp.x, cp.y, aX, aY);
}
context.stroke();

您可能需要两个版本，所以只需 copy/create 它的新功能或参数。

如何将两种不同的类型应用于 sigma.js 中的边缘

How to apply two different type to an edge in sigma.js

javascript

graph

sigma.js