使用 jsPlumb 连接文本范围

Question

我使用 jsPlumb 来显示文本中的关系。基础是包含注释（颜色编码）的文本。我现在想用注释之间的箭头表示关系。箭头的方向至关重要。我现在已经设置了一个代码，但没有显示连接/箭头。我究竟做错了什么？感谢您的提示。

这是我的fiddle

HTML:

<span style="background-color: LightBlue" class="annotation">Jemand</span> musste <span class="annotation" style="background-color: LightBlue">Josef K.</span><span> verleumdet haben, denn ohne dass </span><span
class="annotation" style="background-color: LightBlue">er</span><span> etwas Böses getan hätte, wurde er eines Morgens verhaftet. »Wie ein Hund!« sagte </span><span
class="annotation" style="background-color: LightBlue">er</span><span>, es war, als sollte die Scham ihn überleben. Als </span><span
class="annotation" style="background-color: LightBlue">Gregor Samsa</span><span> eines Morgens aus unruhigen Träumen erwachte, fand </span><span class="annotation" style="background-color: LightBlue">er</span>

JS

jsPlumb.ready(function () {
jsPlumb.Defaults.Container = $("body");

window.jsPlumbDemo = {

    init: function () {

        // setup some defaults for jsPlumb. 
        jsPlumb.importDefaults({
            Endpoint: ["Dot", {
                radius: 5
            }],
            HoverPaintStyle: {
                strokeStyle: "#1e8151",
                lineWidth: 1
            },
            ConnectionOverlays: [
                ["Arrow", {
                    location: 1,
                    id: "arrow",
                    length: 15,
                    foldback: .9
                }]
            ]
        });

$( "#dialog-confirm" ).dialog({
autoOpen:false,
resizable: false,
height:140,
modal: true,
buttons: {
    "Delete relation": function() {
        jsPlumb.detach($(this).data('connection'));
        $( this ).dialog( "close" );
    },
    Cancel: function() {
        $( this ).dialog( "close" );
     }
   }
});


        jsPlumb.bind("click", function (c) {
            $( "#dialog-confirm" ).data('connection', c)
                                  .dialog( "open" );
        });

        jsPlumb.makeSource({
            filter: ".annotation", // only supported by jquery
            anchor: ["Right","Left"],
            //parent: "parent",
            isSource: true,
            isTarget: true,
            connector: ["Bezier", {
                curviness: 50
            }],
            connectorStyle: {
                strokeStyle: "#ff0000",
                lineWidth: 2,
                outlineColor: "transparent",
                outlineWidth: 4
            },
            maxConnections: 5,
            onMaxConnections: function (info, e) {
                alert("Maximum connections (" + info.maxConnections + ") reached");
            }
        });



        jsPlumb.makeTarget({
            filter: ".annotation", // only supported by jquery
            //parent: "parent",
            dropOptions: {
                hoverClass: "dragHover"
            },
            anchor: ["Right","Left"],
            isSource: true,
            isTarget: true,
            connector: ["Bezier", {
                curviness: 50
            }],
            connectorStyle: {
                strokeStyle: "#5c96bc",
                lineWidth: 2,
                outlineColor: "transparent",
                outlineWidth: 4
            },
        });



    }
};


var resetRenderMode = function (desiredMode) {
    var newMode = jsPlumb.setRenderMode(desiredMode);
    $(".rmode").removeClass("selected");
    $(".rmode[mode='" + newMode + "']").addClass("selected");

    $(".rmode[mode='canvas']").attr("disabled", !jsPlumb.isCanvasAvailable());
    $(".rmode[mode='svg']").attr("disabled", !jsPlumb.isSVGAvailable());
    $(".rmode[mode='vml']").attr("disabled", !jsPlumb.isVMLAvailable());

    jsPlumbDemo.init();
};

resetRenderMode(jsPlumb.SVG);

window.jsPlumbDemo.loadTest = function (count) {
    count = count || 10;
    for (var i = 0; i < count; i++) {
        jsPlumbDemo.init();
    }
};


});

Answer 1

不确定这是否是你的全部问题，但我认为 makeSource 和 makeTarget 将 id 作为第一个参数，所以我会尝试将整个 html 包装在 <div id="foo"></div> 中并调用jsPlumb.makeSource("foo", {...}) 和 jsPlumb.makeTarget("foo", {...})。我也没有在 jsfiddle 上正确显示它。

使用 jsPlumb 连接文本范围

Connection text span with jsPlumb

jquery

jsplumb