D3:一个SVG中的多个力布局？

Question

我已经看到了在单个页面上创建多个强制布局的解决方案,其中每个布局都包含在自己的SVG中; 但是,我无法找到有关如何在单个SVG中包含多个强制布局的帮助.每个布局都有自己的数据.

我目前正在做的一个例子可以在http://jsfiddle.net/connorgr/SRAJa/找到.我已经包含了下面代码的关键部分.除了最后一个节点/链接数据之外,最终结果看起来非常像强制布局从未激活(或删除).有没有办法防止这种情况发生？

由于我正在构建的可视化的用例,我无法将数据合并在一起并仅使用一个布局.

/**
  * Creates a force layout in svgObj for each element in graphs
  * (svg) svgObj - The SVG to include the force layouts in
  * (json) graphs - An array of {"nodes":[...],"links":[...]} objects
  */
function generateMultiForce(svgObj, graphs) {
  for(var i=0; i < graphs.length; i++) {
    var graph = graphs[i];

    var graphArea = svgObj.append("g");

    var force = d3.layout.force()
        .charge(-200)
        .linkDistance(45)
        .size([width, height])
        .nodes(graph.nodes)
        .links(graph.links)
        .start();

    var link = graphArea.selectAll(".link")
        .data(graph.links)
        .enter().append("line")
          .attr("class", "link");

    var nodeGroup = graphArea.selectAll("g")
        .data(graph.nodes)
        .enter().append("g")
        .call(force.drag);

    var node = nodeGroup.append("circle")
        .attr("class", "node")
        .attr("r", 5)
        .style("fill", function(d) {
          return color(d.group); });

    var text = nodeGroup.append("text")
        .attr("x", 8)
        .attr("y", ".31em")
        .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; });

      nodeGroup.attr("transform", function(d) {
          return "translate("+d.x+","+d.y+")";
        });
    });
  }
}

Answer 1

以下方法将力,节点和链接数据限制为其对应的力导向布局.通过这种方式,您可以根据需要为同一SVG添加任意数量的布局,而不会导致节点间干扰.每个布局可以单独格式化.如果您最终希望布局相互影响,则可以编辑各自的刻度函数.

function layout1(inputNodes, inputLinks) {
   var force = d3.layout.force();
   var nodes = force.nodes();
   var links = force.links();

   var update = function() {
      //append nodes and links from data

      force.on("tick",function(e){
         //tick movement

      }
   }
   for(var i=0; i<inputNodes.length; i++){
      nodes.push(inputNodes[i]);
   }
   for(var i=0; i<inputLinks.length; i++){
      links.push(inputLinks[i]);
   }
   update();
}

现在,第二个力导向布局可以具有相同的结构,并且相同的变量名称也是如此:

function layout2(inputNodes, inputLinks) {
   var force = d3.layout.force();
   var nodes = force.nodes();
   var links = force.links();

   var update = function() {
      //append nodes and links from data

      force.on("tick",function(e){
         //tick movement

      }
   }
   for(var i=0; i<inputNodes.length; i++){
      nodes.push(inputNodes[i]);
   }
   for(var i=0; i<inputLinks.length; i++){
      links.push(inputLinks[i]);
   }
   update();
}

最后用任何数据实例化:

var layout1 = new layout1(inputNodes, inputLinks);
var layout2 = new layout2(inputNodes, inputLinks);

可以采用此方法即时创建多个布局.希望接近您正在寻找的东西.

Answer 2

您可以将generateMultiForce函数编写为jquery插件 - 这似乎使图形保持独立并对两者应用力布局：

var width = 600,
    height = 600;

var color = d3.scale.category20();

var data = [
  {
    "nodes": [
      {"name": "Hello"},
      {"name": "World"}
    ],
    "links": [
      {"source": 0, "target": 1, "value": 0.5}
    ]
  },
  {
    "nodes": [
      {"name": "Zero"},
      {"name": "One"},
      {"name": "Two"}
    ],
    "links": [
      {"source": 0, "target": 1, "value": 0.25},
      {"source": 1, "target": 2, "value": 0.5},
      {"source": 2, "target": 0, "value": 0.25}
    ]
  }
];

(function( $ ) {
    $.fn.generateMultiForce = function(svgObj) {

        return this.each(function() {
            var graph = this;
            var graphArea = svgObj.append("g");

            var force = d3.layout.force()
                .charge(-200)
                .linkDistance(45)
                .size([width, height])
                .nodes(graph.nodes)
                .links(graph.links)
                .start();

            var link = graphArea.selectAll(".link")
                .data(graph.links)
                .enter().append("line")
                .attr("class", "link");

            var nodeGroup = graphArea.selectAll("g")
                .data(graph.nodes)
                .enter().append("g")
                .call(force.drag);

            var node = nodeGroup.append("circle")
                .attr("class", "node")
                .attr("r", 5)
                .style("fill", function(d) {
                  return color(d.group); });

            var text = nodeGroup.append("text")
                .attr("x", 8)
                .attr("y", ".31em")
                .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; });

              nodeGroup.attr("transform", function(d) {
                  return "translate("+d.x+","+d.y+")";
              });
           });
        });
    };
})(jQuery);

var svgTest = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

$(data).generateMultiForce(svgTest);