// Set up map
function map_init(){

    force = d3.layout.force()
        .nodes(nodes)
        .links(links)
        .size([width,height])
        .on("tick",tick);

    svg = d3.select("#map").append("svg")
        .attr("width",width)
        .attr("height",height);

    link = $map.selectAll(".link");
    node = $map.selectAll(".node");

    d3.json("graph.json",function(error,graph) {

        // set up nodes
        for( i = 0; i < graph.nodes.length; i++ ){          
            nodes.push( graph.nodes[i] );
        }

        // position nodes to three different gravity centres based on theme
        for( i = 0; i < nodes.length; i++ ){
            if ( nodes[i].theme == "theme1" ){ 
                nodes[i].cx = 100;
                nodes[i].cy = 100; 
            } else if ( nodes[i].theme == "theme2" ){ 
                nodes[i].cx = 300;
                nodes[i].cy = 300; 
            } else if ( nodes[i].theme == "theme3" ){ 
                nodes[i].cx = 500;
                nodes[i].cy = 500; 
            }   
        }

        // link nodes of the same theme
        theme1_nodes = nodes.filter(function(d){ return (d.theme == "theme1"); });
        theme2_nodes = nodes.filter(function(d){ return (d.theme == "theme2"); });
        theme3_nodes = nodes.filter(function(d){ return (d.theme == "theme3"); });
        for (i = 0; i < theme1_nodes.length-1; i++){
            links.push({ source: theme1_nodes[i],target: theme1_nodes[i+1] });
        }
        for (i = 0; i < theme2_nodes.length-1; i++){
            links.push({ source: theme2_nodes[i],target: theme2_nodes[i+1] });
        }
        for (i = 0; i < theme3_nodes.length-1; i++){
            links.push({ source: theme3_nodes[i],target: theme3_nodes[i+1] });
        }

        start();

    }); 

}

// Start
function start() {

  link = link.data(force.links(),function(d) { return d.source.id + "-" + d.target.id; });
  link.enter()
    .insert("svg:line")
        .attr("class","link");
  link.exit()
        .remove();

  node = node.data(force.nodes(),function(d) { return d.id; });
  var nodeEnter = node.enter()
          .append("svg:g")
            .attr("class","node");
        .on("click",map_nodeClick);
  node.exit().remove();

  // Enter node information
  nodeEnter.each(function(d) {
        theTitle = d3.select(this).append("svg:text")
        .attr("font-family","Helvetica")
            .attr("class","title")
        .text( d.title );
    });

    // More content to go into each node
    // .
    // .
    // .

  force.start();

}

// Tick
function tick(e) {

    node
      .each(gravity(.2 * e.alpha))
      .attr("cx",function(d) { return d.x; })
      .attr("cy",function(d) { return d.y; })
      .attr("transform",function(d) { return "translate(" + d.x + "," + d.y + ")"; });

    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; });

}

// Gravity
function gravity(alpha) {

  return function(d) {
    d.y += (d.cy - d.y) * alpha;
    d.x += (d.cx - d.x) * alpha;
  };

}

// Set up when page first loads
map_init();

为了在不重新加载页面的情况下随时重置/重启强制布局,我将以下函数绑定到重置按钮：

// Remove force layout and data
function map_remove(){

    node.remove();
    link.remove();
    svg.remove();
    nodes = [];
    links = [];

}

// Reset button
$('a#reset').click(function(e){

    e.preventDefault();

    map_remove();
    map_init();

});

此网页显示在一组人可以访问的设备上.仅在早上加载一次,并在iPad Safari上运行12小时.节点之间的链接理想地基于用户输入(将被实现)动态地改变.除了力布局外,网页上还有其他信息.需要重新启动/重置强制布局而不重新加载页面的选项.

>是否有内置方法来破坏D3力布局及其数据？@H_404_11@>目前这可以正常工作,因为没有创建额外的DOM元素,也没有从检查器中发现错误.但是我不确定如何检查所有D3对象是否已被清除/清空,因此没有存储/累积重复数据？@H_404_11@>目前,由于某些原因,每次重置都会使节点越来越靠近地图的中心.我错过了map_remove()函数中的某些内容吗？@H_404_11@>完全重启D3强制布局是否会在任何时候提高浏览器的性能？即清理用于绘制SVG的内存？