使用jsPlumb连接文本跨度

问题描述：

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

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


});

答

不知道这是你的整个问题，但我认为makeSource和makeTarget采取ID作为第一个参数，所以我会尝试包装整个HTML我n a <div id="foo"></div>并调用jsPlumb.makeSource("foo", {...})和jsPlumb.makeTarget("foo", {...})。我也没有好运，实际上让它在jsfiddle上正确显示。

使用jsPlumb连接文本跨度

相关推荐