角nvd3被迫向圖 - 增加邊緣長度

Question

我使用角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圖標。

Answer 1

您可以用linkStrength和linkDist兩個值玩屬性調整圖形的形狀。減少linkStrength，或許到0.05而不是0.1，並增加linkDist（在該示例默認30）。當你點擊「擴展」的example page頂部右手邊

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

所有支持的圖表選項是可見的。