Добавить метку к краям в arbor.js (плагин Query) - PullRequest
Новая
       44

Добавить метку к краям в arbor.js (плагин Query)

6 голосов
/ 21 сентября 2011

Как добавить метки к ребрам в arbor.js Это библиотека визуализации графа.

Предположим, что A и B - узлы, а E - ребро. Один грубый способ - вставить "текстовый узел" Tи присоединиться к AT и TB

Но я не хочу этого, есть ли другой способ?

Вот пример кода 

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)

В этом, A являетсяподключен к B, C и D. Как поставить этикетку на края?

Ответы [ 2 ]

10 голосов
/ 22 сентября 2011

arbor.js позволяет вам написать код для отображения всего графика. В методе рендеринга вы можете делать все, что захотите, включая заголовки рисованных краев, которые вы можете хранить на отдельной карте.

Просто переопределите метод render в Renderer следующим образом: 

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

Этот код ожидал, что свойство данных каждого ребра будет заполнено во время инициализации.

Я создаю все узлы и ребра вручную, используя мою пользовательскую карту и методы addNode / addEdge, но я полагаю, вы можете немного изменить свой код, чтобы инициализировать ребра с пользовательскими данными следующим образом: 

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"}}
           }
  }
}

П.С .: взгляните на этот пример , я многому научился из него.

0 голосов
/ 16 апреля 2015

edge.data равно {length:.8, data:{name:"A->B"}}, поэтому замените последнюю строку метода particleSystem.eachEdge() на следующий код 

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

, который работал для меня.

...