Angular nvd3 forced directed graph - increase edge length

Question

I am using angular nvd3 to plot a forced directed graph.

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

These are the 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>

Graph edges are too short and nodes are too close, i wanted to increase edge length. This is the output :

This link gives option to modify link distance :

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

I tried like this in chrome console, it didnt change any thing :

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

Edit: I also want to show font-awesome icon on some of the nodes.

Answer 1

You can play with both the values of linkStrength and linkDist attributes to adjust the graph's shape. Decrease linkStrength, perhaps to 0.05 instead of 0.1, and increase linkDist (default 30 in the example).

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

All the supported chart options are visible when you click on "extended" at the top right-hand-side of the example page.