Cum pot seta nodul focal într-un D3.js Force Directed Graph?

Am un set de date care definește un număr de noduri pe care să le utilizeze într-un grafic Force Directed. Arată ca...

  var nodeSet = [
    {id: "N1", name: "Node 1", type: "Type 1", hlink: "http://www.if4it.com"},
    {id: "N2", name: "Node 2", type: "Type 3", hlink: "http://www.if4it.com/glossary.html"},
    {id: "N3", name: "Node 3", type: "Type 4", hlink: "http://www.if4it.com/resources.html"},
    {id: "N4", name: "Node 4", type: "Type 5", hlink: "http://www.if4it.com/taxonomy.html"},
    {id: "N5", name: "Node 5", type: "Type 1", hlink: "http://www.if4it.com/disciplines.html"}
  ];

Cum pot spune force.layout în biblioteca d3.js să utilizeze "Nodul 1" din id = "N1" ca rădăcină primară sau nod focal?

0

2 răspunsuri

Dacă doriți doar un nod rădăcină, puteți avea o proprietate rădăcină în obiect și setați-l la adevărat, decât tratați separat acest nod. De asemenea, puteți seta această rădăcină la centru. Iata cum am facut-o (d3 + Prototype - in acel moment - acum trecerea la d3 + jQuery + underscore):

getCenter: function() {
    var center = {
        x : this.width/2,
        y : this.height/2
    };
    return center;
}

//later do something like this in your init method:
var first = {
                id : id,
                name : name,
                x : this.getCenter().x,
                y : this.getCenter().y,
                root : true,
                //other properties
            };

//later in your redraw() or other methods you might employ...
//try to find the root node later in the code using something like:
var rootNode = this.nodes.detect(function(node) {
    return node.root;
});

//do something to the root node after you have detected it...
if (rootNode) {
    rootNode.x = rootNode.px = this.getCenter().x;
    rootNode.y = rootNode.py = this.getCenter().y;
    //some other stuff...
}

Acesta este modul în care am făcut-o. Cu toate acestea, nu este clar pentru mine ce link-uri din exemplul dvs. ... Un pic nedumerit. După cum veți observa, pentru un layout orientat spre forță sau animații mai complicate, aproape întotdeauna trebuie să folosiți D3 + altceva (Prototype, jQuery, underscore) pentru metodele simple cum ar fi detectarea sau includerea sau alte metode similare în stilul Ruby.

0
adăugat
Bună. Multumesc pentru raspuns. Informații bune despre găsirea centrului. În ceea ce privește un nod rădăcină, se pare că D3 utilizează implicit primul nod din lista de noduri (adică "Nodul 1" din matricea de noduri de mai sus) ca rădăcină. Puteți vedea acest lucru în exemplul pe care l-am creat la Force Direct Radial Graph . Nu pare să existe un mod explicit de a le spune să folosească un nod diferit ca rădăcină pentru graficul orientat spre forță. Cel mai bun, Frank
adăugat autor Information Technology, sursa
ca o notă laterală: atunci când faci machete de forță gravă, vei avea nevoie și de anumite metode de ajutor pentru a vă ajuta să plasați nodurile pe care le doriți, pentru a vă ajuta să filtrați sau să trageți nodurile în moduri specifice, precum și setările de forță ... multe dintre aceste metode de ajutor vor folosi probabil una dintre cele 3 biblioteci pe care le-am menționat :)
adăugat autor paxRoman, sursa

Nu sunt sigur ce vrei să spui prin nodul focal sau rădăcină. Dacă doriți să remediați un anumit nod într-un anumit loc (de exemplu centrul), puteți seta atributul său "fix" la adevărat. Pentru mai multe informații, consultați Fixați poziția nodului în D3 Force-Directed Layout , și, de asemenea, Mutarea nodurilor fixe în D3 .

Nu cred că graficul radial radial arată că d3 utilizează implicit primul nod din lista nodurilor ca nod rădăcină. Nodul 1 din exemplul dvs. gravitează întotdeauna spre centru ca o consecință a structurii rețelei. Dacă plasați nodul 1 mai târziu în gama de noduri, comportamentul acestuia este același.

0
adăugat
JavaScript, România - Moldova
JavaScript, România - Moldova
328 participanți

Comunitatea Română JavaScript: github.com/js-ro Pentru confort, opriți notificările. Parteneri: @node_ro, @php_ro, @python_ro, @seo_ro, @RomaniaGroup, @ai_ro, @Grupuri_IT Offtop: @holywars_ro Joburi: @js_jobs_ro Sponsored with ❤️ by ciupacabra.com