Contrôle de l'affichage des graphiques avec la mise en page de force sans spécifier les coordonnées x / y dans les noeuds

Prenez cet exemple:

var graph = { "nodes": [ { "name": "Myriel", "group": 1 }, //0 { "name": "Napoleon", "group": 1 }, //1 { "name": "Mlle.Baptistine", "group": 1 }, //2 { "name": "Mme.Magloire", "group": 1 }, //3 { "name": "CountessdeLo", "group": 1 },//4 { "name": "Geborand", "group": 1 } // { "name": "Champtercier", "group": 1 } ], "links": [ { "source": 0, "target": 1, "value": 50}, { "source": 1, "target": 2, "value": 50}, { "source": 2, "target": 0, "value": 50}, { "source": 3, "target": 4, "value": 50}, { "source": 4, "target": 5, "value": 50}, { "source": 5, "target": 3, "value": 50} ] } var force = d3.layout.force() .linkDistance(function (d){ return d.value; }) .size([width, height]) .nodes(graph.nodes) .links(graph.links) .friction(0) .chargeDistance(200) var link = svg.selectAll(".link") .data(graph.links) .enter().append("line") .attr("class", "link") .style("stroke-width", function (d) { return Math.sqrt(d.value); }); var node = svg.selectAll(".node") .data(graph.nodes) .enter().append("circle") .attr("class", "node") force.on('tick', function () { node.attr('r', 15) .attr('cx', function (d) { return dx; }) .attr('cy', function (d) { return dy; }); link.attr('x1', function (d) { return d.source.x; }) .attr('y1', function (d) { return d.source.y; }) .attr('x2', function (d) { return d.target.x; }) .attr('y2', function (d) { return d.target.y; }); }); force.start(); 

Lorsque je passe dans des nœuds sans coordonnées x et y spécifiées, il existe un moyen de contrôler la disposition des graphiques. Par exemple, mes liens ci-dessus créent deux graphiques triangulaires distincts, mais parfois ils apparaissent les uns sur les autres. Je me demande s'il existe une propriété que je peux utiliser (friction, chargeDistance, charge, etc.). Cela me permettrait de définir les deux graphiques triangulaires à côté de l'autre sur la même ligne? Ou dois-je spécifier x et y coord pour obtenir ce look? Il semble que la friction aide à les distancer, mais il est difficile de le dire.

J'espérais aussi avoir une clarification – le premier objet dans mon réseau de nœuds correspond-il au premier objet dans mon réseau de liens? Sont-ils associés parce qu'ils ont tous deux un indice de 0 ou comment cela fonctionne-t-il? J'ai du mal à le suivre. Le premier objet de nœuds a-t-il une source de 0 alors et sa cible est le deuxième objet dans le tableau des nœuds (qui aurait une source de 1, cible 1)?

Ma dernière question est qu'il existe un moyen d'afficher les nœuds sans utiliser "fin" ou "tic". Je voudrais que les graphiques apparaissent juste sur la page quand il charge mais avec "fin", il faut trop de temps pour montrer et avec "cocher" ils glissent sur la page que je ne veux pas. Lorsque j'ai essayé d'ajouter le lien attr comme je l'ai dans la fonction "tick", j'obtiens une erreur indéfinie car il ne peut pas trouver les coordonnées x et y.

• D3.js – masquer des formes pour créer une section transparente
• Comment puis-je détecter l'intersection des lignes sur un globe géométrique D3?
• D3.js: Accès à la propriété d'objet à l'intérieur d'Array for Creating Line Graph
• Le zoom D3 ne fonctionne pas
• Focus sur le champ de formulaire après l'animation

Merci

• D3.js – Treemap où la valeur des parents est supérieure à la somme de ses enfants
• Comment puis-je exécuter un javascript en tant que script node.js sans DOM?
• D3 séquences Sunburst Animation
• Comment faire disparaître les cercles en fonction de l'entrée du clavier?
• D3.js Disposition de la force rabattable: les liens ne sont pas générés