如何在单击按钮时显示第二个布局

Question

所以点击circ我试图让它显示第二个布局，但这只有在我点击其他任何按钮之前我在上圈时才有效。当我点击另一个不同的按钮然后我尝试点击圈子它不起作用时，它不起作用。我不确定我做错了什么。我也是一名新手编码员，所以我可能会做错。 ：（

      var force = d3.layout.force()
                                                                 .size([width, height])
                                                                 .charge(-50)
                                                                 .linkDistance(10)
                                                                 .on("tick", tick)
                                                                 .on("start", function(d) {})
                                                                 .on("end", function(d) {})
    function tick(d) {
                var k = d.alpha * .1;
                graph.nodes.forEach(function(d,i) {
                                    if (d.continent == "Africa")
                                    {
                                    var center_x = []
                                    var center_y = []
                                    var other= center_x.push(450)
                                    var others= center_y.push(1500)
                                    d.x += (center_x - d.x) * k;
                                    d.y += (center_y - d.y) * k;
                                    }
                                    if (d.continent == "Asia")
                                    {
                                    var center_x = []
                                    var center_y = []
                                    var other= center_x.push(250)
                                    var others= center_y.push(1500)
                                    d.x += (center_x - d.x) * k;
                                    d.y += (center_y - d.y) * k;
                                    }
                                    if (d.continent == "Americas")
                                    {
                                    var center_x = []
                                    var center_y = []
                                    var other= center_x.push(650)
                                    var others= center_y.push(1500)
                                    d.x += (center_x - d.x) * k;
                                    d.y += (center_y - d.y) * k;
                                    }
                                    if (d.continent == "Europe")
                                    {
                                    var center_x = []
                                    var center_y = []
                                    var other= center_x.push(-30)
                                    var others= center_y.push(1500)
                                    d.x += (center_x - d.x) * k;
                                    d.y += (center_y - d.y) * k;
                                    }
                                    if (d.continent == "Oceania")
                                    {
                                    var center_x = []
                                    var center_y = []
                                    var other= center_x.push(850)
                                    var others= center_y.push(1500)
                                    d.x += (center_x - d.x) * k;
                                    d.y += (center_y - d.y) * k;
                                    }
                                    })

                graph_update(100);
                }

                function circular_layout() {
                force.stop;
                force.on("tick", function(e) {
                         var k = e.alpha * .1;
                         graph.nodes.forEach(function(d,i) {
                                             if (d.continent == "Africa")
                                             {

                                             d.x += (-100 - (d.x)) * k;
                                             d.y += (0-(d.y)) * k;
                                             }
                                             if (d.continent == "Asia")
                                             {
                                             d.x += (300 - d.x) * k;
                                             d.y += (-300- d.y) * k;
                                             }
                                             if (d.continent == "Americas")
                                             {
                                             d.x += (700 - d.x) * k;
                                             d.y += (0- d.y) * k;
                                             }
                                             if (d.continent == "Europe")
                                             {
                                             d.x += (150 - d.x) * k;
                                             d.y += (400- d.y) * k;
                                             }
                                             if (d.continent == "Oceania")
                                             {
                                             d.x += (550 - d.x) * k;
                                             d.y += (400- d.y) * k;
                                             }
                                             });
                         })

                ;
                graph_update (500)
                }

    function graph_update(duration) {
        link.transition().duration(duration)
        .attr("x1", function(d) { return d.target.x; })
        .attr("y1", function(d) { return d.target.y; })
        .attr("x2", function(d) { return d.source.x; })
        .attr("y2", function(d) { return d.source.y; });
        node.transition().duration(duration)
        .attr("transform", function(d) { 
              return "translate("+d.x+","+d.y+")"; 
              });
    }

    d3.select("input[value=\"horizontal\"]").on("click", force_layout);
    d3.select("input[value=\"circ\"]").on("click", circular_layout);

                var link = svg.selectAll(".link")
                .data(graph.links);
                link.enter().append("line")
                .attr("class", "link")
                var node = svg.selectAll(".node")
                .data(graph.nodes)
                .enter()
                .append("g").attr("class", "node")

                node.append("circle")
                .attr("r", 5)

                node.append("text")
                .text( function (d) { return " " + d.name + ""; })
                .attr("font-size", "12px")
                .attr("font-family", "helvetica")
                .attr("dx", 12)
                .attr("dy", ".35em")

                force_layout();
                });