Angular nvd3 强制有向图 - 增加边长答案

【问题标题】：Angular nvd3 forced directed graph - increase edge lengthAngular nvd3 强制有向图 - 增加边长
【发布时间】：2017-08-17 07:42:49
【问题描述】：

我正在使用角度 nvd3 来绘制强制有向图。

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

这些是配置：

 $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>

图边太短，节点太近，我想增加边长。这是输出：

此链接提供修改链接距离的选项：

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

我在 chrome 控制台中这样尝试过，它没有改变任何东西：

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

编辑：我还想在某些节点上显示font-awesome 图标。

【问题讨论】：

标签： javascript angularjs d3.js nvd3.js angular-nvd3

【解决方案1】：

您可以同时使用linkStrength 和linkDist 属性的值来调整图形的形状。减少 linkStrength，可能是 0.05 而不是 0.1，并增加 linkDist（示例中默认为 30）。

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

当您单击example page 右上角的“扩展”时，所有受支持的图表选项都可见。

【讨论】：