Graphique orienté forcé nvd3 angulaire - augmentation de la longueur d'arête

Question

J'utilise angulaire nvd3 pour tracer un graphe orienté forcé.

http://krispo.github.io/angular-nvd3/#/forceDirectedGraph 

Ce sont les configurations:

$scope.graphOption = { 
         chart: { 
          type: 'forceDirectedGraph', 
          height: 450, 
          width: (function(){ return nv.utils.windowSize().width - 350 })(), 
          margin:{top: 20, right: 20, bottom: 20, left: 20}, 
          color: function(d){ 
           return color(d.group) 
          }, 
          charge: -300, 
          tooltip: { 
            contentGenerator: function (key, x, y, e, graph) { 
            var ttContent = $scope.getTooltilContent(key); 

            return '<div class="nvd3-tooltip-wls">'+ttContent+'</div>'; 
            } 
          }, 
          nodeExtras: function(node) { 
           node && node 
            .append("text") 

            .text(function(d) { return d.name }) 
            .style('font-size', '11px'); 
          } 
         } 
       }; 

HTML:

<nvd3 id="graphPlot" options="graphOption" data="graphData"></nvd3> 

bords graphiques sont trop courts et les noeuds sont trop proches, je voulais augmenter la longueur du bord. Ceci est la sortie:

Ce lien donne l'option de modifier la distance de lien:

http://bl.ocks.org/sathomas/11550728 

J'ai essayé comme ça dans la console chromée, il na pas changer quelque chose:

var force = d3.layout.force() 
    .size([1000, 450]) 
    .nodes(nodes) 
    .links(links); 
force.linkDistance(1000); 
force.start() 

Editer: Je veux également montrer font-awesome icône sur certains des noeuds.

Answer 1

Vous pouvez jouer avec les valeurs linkStrength et linkDist pour ajuster la forme du graphique. Diminuer linkStrength, peut-être à 0,05 au lieu de 0,1, et augmenter linkDist (par défaut 30 dans l'exemple).

$scope.graphOption = { 
    chart: { 
     type: 'forceDirectedGraph', 
     // [...] 
     charge: -300, 
     linkStrength: .05, 
     linkDist: 100, 
     // [...] 
    } 
}; 

Toutes les options graphiques prises en charge sont visibles lorsque vous cliquez sur « étendu » en haut à droite côté de la example page.