Angular NVD3强制有向图-增加边长

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 .