Javascript vis.js中的自定义边绘制功能

我正在使用库绘制网络，但我需要自定义边的绘制方式。例如，我想画50%的边用红色，另外50%用蓝色

---

有没有办法做到这一点？

不能直接自定义边的部分，但可以使用虚拟不可见节点作为连接件创建两个不同的边（每个边都有自己的样式）。由于虚拟节点不可见，因此这两条边将看起来像同一条边的两部分

例如，假设您要连接两个具有半绿半红边的节点：

var nodes = new vis.DataSet([
    {id: 1, label: '1'},
    {id: 2, label: '2'},
    {id: 'dummy', hidden: true}
]);

var edges = new vis.DataSet([
    {from: 1, to: 'dummy', color:'red'},
    {from: 'dummy', to: 2, color:'green'}
]);

var graph = {nodes: nodes, edges: edges};

---

不能直接自定义边的部分，但可以使用用作连接件的虚拟不可见节点创建两条不同的边（每条边都有自己的样式）。由于虚拟节点不可见，因此这两条边将看起来像同一条边的两部分

例如，假设您要连接两个具有半绿半红边的节点：

var nodes = new vis.DataSet([
    {id: 1, label: '1'},
    {id: 2, label: '2'},
    {id: 'dummy', hidden: true}
]);

var edges = new vis.DataSet([
    {from: 1, to: 'dummy', color:'red'},
    {from: 'dummy', to: 2, color:'green'}
]);

var graph = {nodes: nodes, edges: edges};

---

终于找到了一种方法：

var nodes = new vis.DataSet
([
    {id: 1, label: '1'},
    {id: 2, label: '2'},
]);

var edges = new vis.DataSet
([
    {from: 1, to: 2, color:'red'},
]);

var graph = {nodes: nodes, edges: edges};
var network = new vis.Network(container, graph, options);
var percent = 50;
network.on("afterDrawing", function (ctx)
{
    var pos = network.getPositions([1, 2]);
    ctx.strokeStyle = ctx.filStyle = 'green';
    ctx.moveTo(pos[1].x, pos[1].y);
    ctx.lineTo(pos[1].x + (pos[2].x-pos[1].x)*percent/100, pos[1].y + (pos[2].y - pos[1].y)*percent/100);
    ctx.fill();
    ctx.stroke();
});

---

终于找到了一种方法：

var nodes = new vis.DataSet
([
    {id: 1, label: '1'},
    {id: 2, label: '2'},
]);

var edges = new vis.DataSet
([
    {from: 1, to: 2, color:'red'},
]);

var graph = {nodes: nodes, edges: edges};
var network = new vis.Network(container, graph, options);
var percent = 50;
network.on("afterDrawing", function (ctx)
{
    var pos = network.getPositions([1, 2]);
    ctx.strokeStyle = ctx.filStyle = 'green';
    ctx.moveTo(pos[1].x, pos[1].y);
    ctx.lineTo(pos[1].x + (pos[2].x-pos[1].x)*percent/100, pos[1].y + (pos[2].y - pos[1].y)*percent/100);
    ctx.fill();
    ctx.stroke();
});

---

感谢您的帮助，但这背后的想法是显示一个由边缘表示的“进度条”，您的答案实际上不允许这样做。对于OP：问题没有提供足够的信息，因此此答案可能是错误的。如果你想要的不是50/50，你应该在你的问题中说明。谢谢你的帮助，但这背后的想法是显示一个由边缘表示的“进度条”，而你的答案实际上不允许这样做。对于OP：问题没有提供足够的信息，说明这个答案是错误的。如果你想要的不是50/50，你应该在你的问题中说明。