jsPlumb连接器绘制样式渐变不一致

Question

问题：连接器绘画样式渐变并不总是渐变。

我在页面上的几个HTML元素之间创建连接。为了看起来不错，我的目标是将连接线绘制为渐变，首先是源点是源对象背景颜色的颜色，目标点是目标对象背景颜色的颜色。它运行良好，但不是每个连接，这很奇怪。

这段代码创建了连接，它包含在一个函数中，所以我可以用每个“$（object）.each”迭代来调用它。

这是完整的功能：

createConnection = (source_id, target_id, source_color, target_color) =>
    console.log "source color : "+ source_color + "  |  target color : " + target_color
    jsPlumb.connect({
        source: source_id,
        target: target_id,
        anchors:["Bottom", "Top"],
        connector: ["Bezier", { curviness: 60 }],
        endpointStyles:[ 
            { fillStyle: source_color },
            { fillStyle: target_color },
        ],
        paintStyle: {
            gradient: { stops: [
                [ 0, source_color ],
                [ 1, target_color ]
            ] },
            strokeStyle: "#fff",
            lineWidth: 13
        },
        endpoint: ["Dot", { radius: 10 }],
    });

（代码用CoffeeScript编写，顺便说一句）

渐变在某些情况下效果很好，但不是全部。让我告诉你：

这里我们有一个场景，每个对象都有一个孩子。这是他们都没有工作的地方：

控制台输出：

source color : rgb(30, 47, 109)  |  target color : rgb(61, 117, 150)
source color : rgb(61, 117, 150)  |  target color : rgb(51, 185, 191)
source color : rgb(51, 185, 191)  |  target color : rgb(70, 173, 125)

请注意，端点工作正常，而不是连接线。

这里是我添加一个对象的地方，你可以看到一些渐变效果很好，有些渐近有效，有些则根本不起作用。这里：

这是控制台输出：

(2) source color : rgb(30, 47, 109)  |  target color : rgb(61, 117, 150)
source color : rgb(61, 117, 150)  |  target color : rgb(51, 185, 191)
source color : rgb(51, 185, 191)  |  target color : rgb(70, 173, 125)

（2）向我们展示了前两个连接使用相同的颜色，两者都有效。在此示例中，只有最后一个连接器不起作用。

这是另一个例子，另一个孩子被添加到“Hyperproduct X”。

控制台输出：

(2) source color : rgb(30, 47, 109)  |  target color : rgb(61, 117, 150)
source color : rgb(61, 117, 150)  |  target color : rgb(51, 185, 191)
(2) source color : rgb(51, 185, 191)  |  target color : rgb(70, 173, 125)

在最后一张图片中，您会注意到所有连接器都已正确绘制。

这太奇怪了！为什么它们不适用于所有配置？

提前感谢您的任何指导或帮助。