Uncaught TypeError：無法讀取d3.js中未定義的屬性'force'v4

-1

此代碼適用於d3.js版本2，但是，我在版本4中獲得了強制錯誤，如標題中指定的。我試圖調查它，但是，我無法得到任何解決方案。以下是我的代碼的腳本部分。我從這個鏈接引用：http://bl.ocks.org/jose187/4733747 Uncaught TypeError：無法讀取d3.js中未定義的屬性'force'v4

<script> 
function colores_google(n) { 
    var colores_g = ["yellow", "#dc3912", "#ff9900", "#109618", "#990099", "#0099c6", "#dd4477", "#66aa00", "#b82e2e", "#316395", "#994499", "#22aa99", "#aaaa11", "#6633cc", "#e67300", "#8b0707", "#651067", "#329262", "#5574a6", "#3b3eac"]; 
    return colores_g[n % colores_g.length]; 
    } 

    var width = 960, 
     height = 800 
    var svg = d3.select("body") 
       .append("svg") 
       .attr("width", width) 
       .attr("height", height) 
       .append("g"); 
    var force = d3.layout.force() 
        .gravity(.05) 
        .distance(400) 
        .charge(-100) 
        .size([width, height]); 
     d3.json("graphFile.json", function(json) { 
      force 
       .nodes(json.nodes) 
       .links(json.links) 
       .start(); 

     var link = svg.selectAll(".link") 
        .data(json.links) 
        .enter() 
         .append("line") 
         .attr("class", "link") 
         .style('stroke', 'grey') 
         .style("stroke-width", function(d) { return Math.sqrt(d.weight); }); 

     var node = svg.selectAll(".node") 
         .data(json.nodes) 
         .enter() 
         .append("g") 
         .attr("class", "node") 
         .call(force.drag); 

      node.append("circle") 
       .attr("r",function(d){ 
    return d.radius * 5; 
    }) 
    .style("fill", function(d,i) { return colores_google(i); }); 

    node.append("text") 
     .attr("dx", 12) 
     .attr("dy", ".35em") 
     .style('color', 'darkOrange') 
     .text(function(d) { return d.name }); 

    force.on("tick", function() { 
      link.attr("x1", function(d) { return d.source.x; }) 
       .attr("y1", function(d) { return d.source.y; }) 
       .attr("x2", function(d) { return d.target.x; }) 
       .attr("y2", function(d) { return d.target.y; }); 

      node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; }); 
      }); 
      node.on('mouseover', function(d) { 
       link.style('opacity', function(l) { 
       if (d === l.source || d === l.target) 
         return 1; 
       else 
         return 0.1; 
     }); 
     }); 
      node.on('mouseout', function() { 
       link.style('opacity', 1); 
      }); 
     }); 
     </script>

來源

2017-07-16 Prateek Dwivedi

我投票結束這個問題。從v3（甚至不是v2）到v4所做的更改非常龐大，詳細記錄如下：https：//github.com/d3/d3/blob/master/CHANGES.md#forces-d3-force –

在V4，d3.layout.[...]不再存在。在v4中有很大的變化，這將要求你幾乎從頭開始重寫你的代碼。 Here是使用v4 forceSimulation創建的網絡圖示例。您可以使用它來代替您當前的參考，以構建v4。話雖如此，使用d3 v2並沒有什麼特別的錯，正如俗話所說，如果沒有損壞，不要修復它。您可以選擇僅使用d3 v2。

來源

2017-07-16 13:23:09

Uncaught TypeError：無法讀取d3.js中未定義的屬性'force'v4

回答

相關問題