15

我正在尝试找到正确的方法,以便能够在确定后保存力图节点布局位置,然后重新加载该布局并从相同的稳定状态重新开始。

我试图通过克隆包含图表的 DOM 元素、删除它然后重新加载它来做到这一点。

我可以做到这一点,部分如下所示: -

_clone = $('#chart').clone(true,true);
$('#chart').remove();

选择包含的 div,克隆它并删除它,然后再删除

var _target = $('#p1content');
_target.append(_clone);

选择div用于保存图表的那个并重新加载它。重新加载的图表是固定的。

我不知道如何重新连接力量以允许操纵继续进行。这可能吗?我想保留节点的固定位置。

另一种可能性,我可以重新加载节点位置并以低 alpha 启动力吗?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>D3: Force layout</title>
    <script src="./jquery-2.0.3.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="../d3.v3.js"></script>
    <style type="text/css">
        /* No style rules here yet */
    </style>
</head>
<body>
     <div data-role="content" id="p1content">
        <div id="chart"></div>
    </div>
    <script type="text/javascript">

        //Width and height
        var w = 800;
        var h = 600;

        //Original data
        var dataset = {
            nodes: [
                { name: "Adam" },
                { name: "Bob" },
                { name: "Carrie" },
                { name: "Donovan" },
                { name: "Edward" },
                { name: "Felicity" },
                { name: "George" },
                { name: "Hannah" },
                { name: "Iris" },
                { name: "Jerry" }
            ],
            edges: [
                { source: 0, target: 1 },
                { source: 0, target: 2 },
                { source: 0, target: 3 },
                { source: 0, target: 4 },
                { source: 1, target: 5 },
                { source: 2, target: 5 },
                { source: 2, target: 5 },
                { source: 3, target: 4 },
                { source: 5, target: 8 },
                { source: 5, target: 9 },
                { source: 6, target: 7 },
                { source: 7, target: 8 },
                { source: 8, target: 9 }
            ]
        };

        //Initialize a default force layout, using the nodes and edges in dataset
        var force = d3.layout.force()
                             .nodes(dataset.nodes)
                             .links(dataset.edges)
                             .size([w, h])
                             .linkDistance([100])
                             .charge([-100])
                             .start();

        var colors = d3.scale.category10();

        //Create SVG element
        var svg = d3.select("#chart")
                    .append("svg")
                    .attr("width", w)
                    .attr("height", h);

        //Create edges as lines
        var edges = svg.selectAll("line")
            .data(dataset.edges)
            .enter()
            .append("line")
            .style("stroke", "#ccc")
            .style("stroke-width", 1);

        //Create nodes as circles
        var nodes = svg.selectAll("circle")
            .data(dataset.nodes)
            .enter()
            .append("circle")
            .attr("r", 10)
            .style("fill", function(d, i) {
                return colors(i);
            })
            .call(force.drag);

        //Every time the simulation "ticks", this will be called
        force.on("tick", function() {

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

            nodes.attr("cx", function(d) { return d.x; })
                 .attr("cy", function(d) { return d.y; });

        });

// After 5 secs clone and remove DOM elements
        setTimeout(function() {
                        _clone = $('#chart').clone(true,true);
                        $('#chart').remove();
        }, 5000);
//After 10 secs reload DOM
        setTimeout(function() {
                        var _target = $('#p1content');
                        _target.append(_clone);

// WHAT NEEDS TO GO HERE TO RECOUPLE THE FORCE?                     

         }, 10000);

    </script>
</body>
</html>

在我放的地方添加了这个 // 什么需要去这里来恢复力量?
这似乎可以拾取已恢复的现有元素并将原力重新耦合到它停止将力节点等传递到超时函数的位置

force = d3.layout.force()
    .nodes(dataset.nodes)
    .links(dataset.edges)
    .size([w, h])
    .linkDistance([100])
    .charge([-100])
    .start();

colors = d3.scale.category10();

//Create SVG element
svg = d3.select("#chart");

//Create edges as lines
edges = svg.selectAll("line")
    .data(dataset.edges);

//Create nodes as circles
nodes = svg.selectAll("circle")
    .data(dataset.nodes)
    .call(force.drag);

//Every time the simulation "ticks", this will be called
force.on("tick", function() {

    edges.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; });
    nodes.attr("cx", function(d) { return d.x; })
        .attr("cy", function(d) { return d.y; });

});
4

3 回答 3

6

编辑:现在完整的解决方案!

此外,这种方法适用于各种场景——既可以停止和重新启动单个页面上的布局,也可以保存和重新加载不同页面上的布局。

首先,在布局过程结束时保存原始 JSON 图,您可以使用它来收听:

force.on('tick', function(){
    ...
}).on('end', function(){
    // Run this when the layout has finished!
});

现在保存很有价值,因为在布局期间,d3 已将 x,y 坐标(和其他一些东西)添加到每个节点和边缘(但会不断变化,直到停止)。作为 JSON,该图很容易序列化,粘贴在 localStorage 中,拉出并再次解析:

localStorage.setItem(JSON.stringify(graph));
...
JSON.parse(localStorage.getItem('graph'));

但是,一旦将其从存储中取出,您不仅需要 JSON 对象,还希望将保存的对象转回 svg,并且理想情况下,为了简单起见,使用 d3.layout.force 已经提供的设备。事实上,您可以做到这一点——只需进行一些小改动

如果您将保存的图表重新插入,即运行

force
  .nodes(graph.nodes)
  .links(graph.links)
  .start();

使用保存的图表,你会得到两个奇怪的行为。

奇怪的行为1,和解决方案

根据良好的文档,在起始图中包含 x 和 y 坐标会覆盖布局过程的随机初始化——但只有初始化。所以你会得到它们应该在的节点,但是随着布局的滴答声,它们会漂浮到一个均匀分布的圆圈中。为了防止这种情况发生,请使用:

  for(n in graph.nodes){
    graph.nodes[n].fixed = 1
  }

运行之前force.start()

奇怪的行为 2 和解决方案 现在,您的节点和边都将位于您希望它们所在的位置,但您的边会 -缩小

发生了类似的事情,但不幸的是,您不能使用完全相同的解决方案。边长保存在 JSON 对象中,并在布局的初始化中使用,但随后布局对它们都施加了默认长度 (20),除非您首先将边长保存在 JSON 图中——

.on('end', function() {

    links = svg.selectAll(".link")[0]
    for(i in graph.links){
      graph.links[i].length = links[i].getAttribute('length')
    }
    localStorage.setItem('graph', JSON.stringify(graph));

});

然后,在force.start()——

force.linkDistance(function (d) { return d.length })

(可以在此处找到文档)最后,您的图表将看起来像它应该的那样。

总之,如果您确保您的 JSON 图 1) 在节点上具有 x,y 坐标,2) 将节点设置为fixed=1,并且 3)force之前设置了 linkDistance ,那么.start()您可以运行与之前完全相同的布局过程从头开始初始化,您将取回已保存的图形。

于 2015-12-27T18:43:57.030 回答
0

因此,除非我误读了以下内容:

https://github.com/mbostock/d3/wiki/Force-Layout#wiki-nodes

强制布局将实际初始化(或如果您再次调用 resume/start 则重新初始化)布局,其中节点和边信息在传递给节点/边函数的值上指定。

我使用您的图表进行了测试,然后在布局结束时恢复了强制布局。它不会重新计算节点/边缘位置,因为它们已经保留在最初传入的数据集上。您还可以通过将 x/y 值添加到初始数据来测试这一点。

http://jsfiddle.net/jugglebird/Brb29/1/

force.on("end", function() {
    // At this point dataset.nodes will include layout information
    console.log("resuming");  
    force.resume(); // equivalent to force.alpha(.1);
});
于 2014-02-06T19:46:51.773 回答
0

重要的是要记住,力布局将其结果存储在数据本身中。这样,当在刻度处理函数中调整数据绑定到的可视节点和边缘时,它们就可以访问。

在考虑所有力和约束进行计算时,力布局会将结果存储到提供给的节点数组中的节点中force.nodes()。在每个刻度结束时,当所有计算完成时,您的dataset.nodes数组将更新为包含新位置、速度等的每个节点,从而表示力布局的当前状态。

然而,能够捕获布局的完整状态还缺少一件事,即它的当前值alpha.

保存datasetalpha,无论您喜欢什么方式,您以后都可以将强制布局恢复到捕获这些属性时的状态。根据您的需要,您可能会使用相当不稳定的存储,例如保留对这些属性的本地引用,或者JSON.stringify()它们甚至能够以某种方式持久化它们。

对于您自己的代码,可以按如下方式完成:

  1. 如果您需要像在第一次超时的回调中所做的那样从 DOM 中完全删除 SVG,那么将附加 SVG 以及节点和边的代码放入函数中会很方便,因为您需要调用它两次.

    function initChart() {
      svg = d3.select("#chart")
                  .append("svg")
                  .attr("width", w)
                  .attr("height", h);
    
      //Create edges as lines
      edges = svg.selectAll("line")
          .data(dataset.edges)
          .enter()
          .append("line")
          .style("stroke", "#ccc")
          .style("stroke-width", 1);
    
      //Create nodes as circles
      nodes = svg.selectAll("circle")
          .data(dataset.nodes)
          .enter()
          .append("circle")
          .attr("r", 10)
          .style("fill", function(d, i) {
              return colors(i);
          })
          .call(force.drag);
    }
    
    initChart();              // Append the SVG with nodes and edges.
    

    但是,如果只设置它就足够了,display:none事情会变得更容易,因为您可以保持所有引用不变。

  2. 要完全保存布局的状态,您需要存储alpha. 之后,您调用force.stop()实际上立即停止力布局。请记住,您dataset已经设置了最新的值。

    var alpha;                // This will save alpha when stopped.
    
    // Stop and remove after 1 second.
    setTimeout(function() {
      alpha = force.alpha();  // Save alpha.
      force.stop();           // Stop the force.
      svg.remove();           // Dump the SVG.
    }, 1000);
    
  3. 您可以随时将强制布局恢复到保存状态。在您的示例中,引用的强制布局force没有被破坏,因此它仍然具有dataset包含布局状态的引用。但是根据 API 文档force.nodes([nodes]),作为参数提供的节点上的值也将在设置全新布局时被采用。然后,您可以通过设置force.alpha(alpha)保存的值来恢复其执行。请注意,在重新启动强制布局之前,SVG 通过另一个调用来重建initChart().

    // Restore to paused state and restart.
    setTimeout(function() {
      initChart();            // Append the SVG with nodes and edges.
      force.alpha(alpha);     // Restart the force with alpha.
    }, 3000);
    

查看完整的代码片段以进行演示。我缩短了超时以强调效果。

        //Width and height
        var w = 800;
        var h = 600;

        //Original data
        var dataset = {
            nodes: [
                { name: "Adam" },
                { name: "Bob" },
                { name: "Carrie" },
                { name: "Donovan" },
                { name: "Edward" },
                { name: "Felicity" },
                { name: "George" },
                { name: "Hannah" },
                { name: "Iris" },
                { name: "Jerry" }
            ],
            edges: [
                { source: 0, target: 1 },
                { source: 0, target: 2 },
                { source: 0, target: 3 },
                { source: 0, target: 4 },
                { source: 1, target: 5 },
                { source: 2, target: 5 },
                { source: 2, target: 5 },
                { source: 3, target: 4 },
                { source: 5, target: 8 },
                { source: 5, target: 9 },
                { source: 6, target: 7 },
                { source: 7, target: 8 },
                { source: 8, target: 9 }
            ]
        };

        //Initialize a default force layout, using the nodes and edges in dataset
        var force = d3.layout.force()
          .nodes(dataset.nodes)
          .links(dataset.edges)
          .size([w, h])
          .linkDistance([100])
          .charge([-100])
          .start()
          .on("tick", function() {
            edges.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; });
 
            nodes.attr("cx", function(d) { return d.x; })
                 .attr("cy", function(d) { return d.y; });
          });

        var colors = d3.scale.category10();

        //Create SVG element
        var svg,
            edges,
            nodes;
            
        function initChart() {
          svg = d3.select("#chart")
                      .append("svg")
                      .attr("width", w)
                      .attr("height", h);
  
          //Create edges as lines
          edges = svg.selectAll("line")
              .data(dataset.edges)
              .enter()
              .append("line")
              .style("stroke", "#ccc")
              .style("stroke-width", 1);
  
          //Create nodes as circles
          nodes = svg.selectAll("circle")
              .data(dataset.nodes)
              .enter()
              .append("circle")
              .attr("r", 10)
              .style("fill", function(d, i) {
                  return colors(i);
              })
              .call(force.drag);
        }
        
        initChart();              // Append the SVG with nodes and edges.

        var alpha;                // This will save alpha when stopped.

        // Stop and remove after 1 second.
        setTimeout(function() {
          alpha = force.alpha();  // Save alpha.
          force.stop();           // Stop the force.
          svg.remove();           // Dump the SVG.
        }, 1000);
        
        // Restore to paused state and restart.
        setTimeout(function() {
          initChart();            // Append the SVG with nodes and edges.
          force.alpha(alpha);     // Restart the force with alpha.
        }, 3000);
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <title>D3: Force layout</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
  <style type="text/css">
    /* No style rules here yet */
  </style>
</head>

<body>
  <div data-role="content" id="p1content">
    <div id="chart"></div>
  </div>
</body>

</html>

于 2015-12-27T22:50:34.480 回答