Question

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

edge.type = 'curvedArrow';

或

edge.type = 'dotted';

如何将两种样式应用于边缘？

Answer 1

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

第一种方法是当你推动边缘开始构建图形时（在我的情况下，通过获取包含所有节点和边缘的JSON参数并开始解析它们以生成我的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,
  })
}

第二种方法是在绘制完所有边后迭代。您再次想要创建一个带有一个参数（确定符）并返回所需线条样式的函数。

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();

您可能需要两个版本，因此只需为其或参数复制/创建新函数即可。

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

2 个答案: