Thêm nhãn vào các cạnh trong arbor.js (Plugin truy vấn)

Question

Làm cách nào để thêm nhãn vào các cạnh trong arbor.js Đó là thư viện hình ảnh hóa biểu đồ.

Giả sử A và B là các nút và E là cạnh Một cách thô sẽ được chèn một "nút chữ" T và tham gia AT và TB

Nhưng tôi không muốn này, là có bất kỳ cách khác?

Dưới đây là các mẫu mã

var theUI = { 
    nodes:{A:{color:"red", shape:"dot", alpha:1}, 
     B:{color:"#b2b19d", shape:"dot", alpha:1}, 
     C:{color:"#b2b19d", shape:"dot", alpha:1}, 
     D:{color:"#b2b19d", shape:"dot", alpha:1}, 
    }, 
    edges:{ 
     A:{ 
      B:{length:.8}, 
      C:{length:.8}, 
      D:{length:.8} 
      } 
    } 
} 

var sys = arbor.ParticleSystem() 
sys.parameters({stiffness:900, repulsion:2000, gravity:true, dt:0.015}) 
sys.renderer = Renderer("#sitemap") 
sys.graft(theUI) 

Trong đó, A được kết nối với B, C và D. Làm thế nào để cung cấp nhãn để cạnh?

Answer 1

arbor.js cho phép bạn viết mã để hiển thị toàn bộ biểu đồ. Bạn có thể làm bất cứ điều gì bạn muốn trong phương pháp render bao gồm các tiêu đề bản vẽ cạnh mà bạn có thể lưu trữ trong một bản đồ riêng biệt.

Chỉ cần override phương pháp render trong Renderer theo cách này:

redraw:function() 
{ 
    ctx.fillStyle = "white"; 
    ctx.fillRect (0,0, canvas.width, canvas.height); 

    particleSystem.eachEdge (function (edge, pt1, pt2) 
    { 
     ctx.strokeStyle = "rgba(0,0,0, .333)"; 
     ctx.lineWidth = 1; 
     ctx.beginPath(); 
     ctx.moveTo (pt1.x, pt1.y); 
     ctx.lineTo (pt2.x, pt2.y); 
     ctx.stroke(); 

     ctx.fillStyle = "black"; 
     ctx.font = 'italic 13px sans-serif'; 
     ctx.fillText (edge.data.name, (pt1.x + pt2.x)/2, (pt1.y + pt2.y)/2); 

    }); 

    particleSystem.eachNode (function (node, pt) 
    { 
     var w = 10; 
     ctx.fillStyle = "orange"; 
     ctx.fillRect (pt.x-w/2, pt.y-w/2, w,w); 
     ctx.fillStyle = "black"; 
     ctx.font = 'italic 13px sans-serif'; 
     ctx.fillText (node.name, pt.x+8, pt.y+8); 
    });  
    }; 

đang mong đợi này sở hữu dữ liệu của mỗi cạnh được điền trong khi khởi tạo.

tôi có thể tạo tất cả các nút và các cạnh bằng tay sử dụng bản đồ tùy chỉnh của tôi và phương pháp addNode/addEdge, bu Tôi cho rằng bạn có thể thay đổi một chút mã của bạn để khởi cạnh với dữ liệu tùy chỉnh theo cách này:

var theUI = { 
    nodes:{A:{color:"red", shape:"dot", alpha:1}, 
     B:{color:"#b2b19d", shape:"dot", alpha:1}, 
     C:{color:"#b2b19d", shape:"dot", alpha:1}, 
     D:{color:"#b2b19d", shape:"dot", alpha:1}, 
    }, 
    edges:{ 
     A:{ 
      B:{length:.8, data:{name:"A->B"}}, 
      C:{length:.8, data:{name:"A->C"}}, 
      D:{length:.8, data:{name:"A->D"}} 
      } 
    } 
}

PS: lấy nhìn vào this example, tôi đã học được rất nhiều từ nó.

Answer 2

edge.data là {length:.8, data:{name:"A->B"}} để thay thế dòng cuối cùng của phương pháp particleSystem.eachEdge() với đoạn mã sau

ctx.fillText (edge.data.data.name, (pt1.x + pt2.x)/2, (pt1.y + pt2.y)/2);

mà làm việc cho tôi.