Javascript 未捕获的TypeError:无法读取d3.js v4中未定义的属性“force”

这段代码适用于d3.js版本2，但是，我在版本4中遇到了一个错误，如标题中所述。我试着调查一下，但找不到任何解决办法。下面是我代码的脚本部分。我参考了这个链接：

---

在v4中，d3.layout.[…]不再存在。v4中有大量的更改，这将要求您几乎从头开始重写代码。是使用v4 forceSimulation创建的网络图示例。您可以使用它而不是当前引用来构建v4。也就是说，使用D3V2没有什么特别的问题，正如俗话所说，如果它没有坏，就不要修复它。您可以选择仅使用d3 v2。

使用指定的节点阵列创建新的模拟，而不使用任何力。如果未指定节点，则默认为空数组

使用d3.forceSimulation[节点]

---

我投票结束这个问题。从v3（甚至不是v2）到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>