无法将D3 v3 Force Directed图转换为D3 v4库实现？

时间：2016-07-04 14:28:09

标签： d3.js

我最近使用v3库创建了我的第一个强制导向图，但现在我需要使用D3版本4库创建相同的图形，但是这些方法在v4中发生了巨大的变化，现在我收到了错误at the force（）/ drag（）方法3现在在v4中不存在。

我的图表基于以下模型 - http://www.ourd3js.com/wordpress/?p=606

是否存在已在d3的v4库中创建的样本存储库，在那里我可以查看并学习一些我可以替换为此特定图表的函数？

修改

我当前的代码看起来像这样，但我无法将其完全转换，例如，有时链接和节点的文本重叠，节点链接非常接近。

<svg width="960" height="600"></svg>

Javascript代码 ：

var svg = d3.select("svg"),
    width = +svg.attr("width"),
    height = +svg.attr("height");

var graph = root;

var w = window,
    d = document,
    e = d.documentElement,
    g = d.getElementsByTagName('body')[0],
    x = w.innerWidth || e.clientWidth || g.clientWidth,
    y = w.innerHeight|| e.clientHeight|| g.clientHeight;

var width = x;
var height = y;
var img_w = 24;
var img_h = 24;
var k = Math.sqrt(root.nodes.length / (width * height));

var simulation = d3.forceSimulation()
    .force("link", d3.forceLink().id(function(d) { return d.id; }))
    .force("charge", d3.forceManyBody().strength(-5 / k))
    .force("center", d3.forceCenter(width / 2, height / 2));

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

    var node = svg.append("g")
                    .attr("class", "nodes")
                    .selectAll("circle")
                    .data(graph.nodes)
                    .enter().append("image")
                            .attr("width",img_w)
                            .attr("height",img_h)
                            .attr("xlink:href",function(d){
                                return d.image;
                            })
                            .call(d3.drag()
                    .on("start", dragstarted)
                    .on("drag", dragged)
                    .on("end", dragended));

    var links_text = svg.selectAll(".linetext")
                        .data(graph.links)
                        .enter()
                        .append("text")
                        .attr("class","linetext slds-text-heading--small")
                        .attr("text-anchor", "middle")
                        .text(function(d){
                            return '['+d.relation+']';
                        });

    var nodes_text = svg.selectAll(".nodetext")
                        .data(graph.nodes)
                        .enter()
                        .append("text")
                        .attr("class","nodetext slds-text-heading--label")
                        .attr("text-anchor", "middle")
                        .attr("dx",-20)
                        .attr("dy",20)
                        .text(function(d){
                            return (d.subname!=''?(d.subname+': '):'')+d.name;
                        });

  simulation
      .nodes(graph.nodes)
      .on("tick", ticked);

  simulation.force("link")
            .links(graph.links);

  function ticked() {
    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; });

    links_text
        .attr("x",function(d){ return (d.source.x + d.target.x) / 2; })
        .attr("y",function(d){ return (d.source.y + d.target.y) / 2; });

    node
        .attr("x", function(d) { return d.x; })
        .attr("y", function(d) { return d.y; });

    nodes_text
        .attr("x",function(d){ return d.x + 20 })
        .attr("y",function(d){ return d.y + img_w/2; });
  }


function dragstarted(d) {
  if (!d3.event.active) simulation.alphaTarget(0.3).restart();
  d.fx = d.x;
  d.fy = d.y;
}

function dragged(d) {
  d.fx = d3.event.x;
  d.fy = d3.event.y;
}

function dragended(d) {
  if (!d3.event.active) simulation.alphaTarget(0);
  d.fx = null;
  d.fy = null;
}

JSON数据字符串： 

  var root = {
  "nodes" : [ {
    "subname" : "",
    "name" : "Telco Power Case",
    "image" : "/node32.png",
    "id" : 0
  }, {
    "subname" : "Contact",
    "name" : "Suman Kumar",
    "image" : "/subnode32.png.png",
    "id" : 1
  }, {
    "subname" : "Contact",
    "name" : "Karla Samuel",
    "image" : "/subnode32.png.png",
    "id" : 2
  }, {
    "subname" : "Account",
    "name" : "Signa Tech",
    "image" : "/subnode32.png.png",
    "id" : 3
  }, {
    "subname" : "",
    "name" : "Maven's Case",
    "image" : "/node32.png",
    "id" : 4
  }, {
    "subname" : "",
    "name" : "Delta Case",
    "image" : "/node32.png",
    "id" : 5
  }, {
    "subname" : "Contact",
    "name" : "T Browney",
    "image" : "/subnode32.png.png",
    "id" : 6
  }, {
    "subname" : "Account",
    "name" : "Presto",
    "image" : "/subnode32.png.png",
    "id" : 7
  }, {
    "subname" : "Contact",
    "name" : "Bob Tannenbaum",
    "image" : "/subnode32.png.png",
    "id" : 8
  }, {
    "subname" : "Account",
    "name" : "Tesla Power",
    "image" : "/subnode32.png.png",
    "id" : 9
  } ],
  "links" : [ {
    "target" : 1,
    "source" : 0,
    "relation" : "Trainee"
  }, {
    "target" : 2,
    "source" : 0,
    "relation" : "Manager"
  }, {
    "target" : 3,
    "source" : 0,
    "relation" : "Technology"
  }, {
    "target" : 1,
    "source" : 0,
    "relation" : "Trainee"
  }, {
    "target" : 2,
    "source" : 0,
    "relation" : "Manager"
  }, {
    "target" : 3,
    "source" : 0,
    "relation" : "Technology"
  }, {
    "target" : 2,
    "source" : 4,
    "relation" : "Expert"
  }, {
    "target" : 2,
    "source" : 5,
    "relation" : "Expert"
  }, {
    "target" : 1,
    "source" : 5,
    "relation" : "Expert"
  }, {
    "target" : 6,
    "source" : 5,
    "relation" : "Trainee"
  }, {
    "target" : 7,
    "source" : 5,
    "relation" : "Technology;New Firm"
  }, {
    "target" : 8,
    "source" : 4,
    "relation" : "Expert"
  }, {
    "target" : 9,
    "source" : 4,
    "relation" : "New Firm"
  }, {
    "target" : 8,
    "source" : 4,
    "relation" : "Expert"
  }, {
    "target" : 9,
    "source" : 4,
    "relation" : "New Firm"
  }, {
    "target" : 6,
    "source" : 5,
    "relation" : "Trainee"
  }, {
    "target" : 7,
    "source" : 5,
    "relation" : "Technology;New Firm"
  } ]
};

1 个答案:

答案 0 :(得分：5)

你要一次性地提出一系列问题，所以让我们对这个问题有点理智。

首先，d3.forceLink上的linkDistance现在是distance，所以在您的代码中：

node
  .attr("x", function(d) {
    return (d.x - img_w /2);
  });

其次，要使图像居中，请在设置x位置时执行此操作：

node
  .attr("x", function(d) {
    var xPos = (d.x - img_w /2);
    if (xPos < 0) return 0;
    if (xPos > (960 - img_w)) return (960 - img_w);
    return xPos;
  })
  .attr("y", function(d) {
    var yPos = d.y;
    if (yPos < 0) return 0;
    if (yPos > (600 - img_h)) return (600 - img_h);
    return yPos;
  });

第三，要进行边界检测，您需要自己实现。例如，要修复节点位置（构建在最后一个代码段上）：

<!DOCTYPE html>
<html>

<head>
  <script data-require="d3@4.0.0" data-semver="4.0.0" src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    .links line {
      stroke: #aaa;
    }
    
    .nodes circle {
      pointer-events: all;
      stroke: none;
      stroke-width: 40px;
    }
  </style>
</head>

<body>
  <svg width="960" height="600"></svg>
  <script>
    var root = {
      "nodes": [{
        "subname": "",
        "name": "Telco Power Case",
        "image": "http://lorempixel.com/24/24/",
        "id": 0
      }, {
        "subname": "Contact",
        "name": "Suman Kumar",
        "image": "http://lorempixel.com/24/24/",
        "id": 1
      }, {
        "subname": "Contact",
        "name": "Karla Samuel",
        "image": "http://lorempixel.com/24/24/",
        "id": 2
      }, {
        "subname": "Account",
        "name": "Signa Tech",
        "image": "http://lorempixel.com/24/24/",
        "id": 3
      }, {
        "subname": "",
        "name": "Maven's Case",
        "image": "http://lorempixel.com/24/24/",
        "id": 4
      }, {
        "subname": "",
        "name": "Delta Case",
        "image": "http://lorempixel.com/24/24/",
        "id": 5
      }, {
        "subname": "Contact",
        "name": "T Browney",
        "image": "http://lorempixel.com/24/24/",
        "id": 6
      }, {
        "subname": "Account",
        "name": "Presto",
        "image": "http://lorempixel.com/24/24/",
        "id": 7
      }, {
        "subname": "Contact",
        "name": "Bob Tannenbaum",
        "image": "http://lorempixel.com/24/24/",
        "id": 8
      }, {
        "subname": "Account",
        "name": "Tesla Power",
        "image": "http://lorempixel.com/24/24/",
        "id": 9
      }],
      "links": [{
        "target": 1,
        "source": 0,
        "relation": "Trainee"
      }, {
        "target": 2,
        "source": 0,
        "relation": "Manager"
      }, {
        "target": 3,
        "source": 0,
        "relation": "Technology"
      }, {
        "target": 1,
        "source": 0,
        "relation": "Trainee"
      }, {
        "target": 2,
        "source": 0,
        "relation": "Manager"
      }, {
        "target": 3,
        "source": 0,
        "relation": "Technology"
      }, {
        "target": 2,
        "source": 4,
        "relation": "Expert"
      }, {
        "target": 2,
        "source": 5,
        "relation": "Expert"
      }, {
        "target": 1,
        "source": 5,
        "relation": "Expert"
      }, {
        "target": 6,
        "source": 5,
        "relation": "Trainee"
      }, {
        "target": 7,
        "source": 5,
        "relation": "Technology;New Firm"
      }, {
        "target": 8,
        "source": 4,
        "relation": "Expert"
      }, {
        "target": 9,
        "source": 4,
        "relation": "New Firm"
      }, {
        "target": 8,
        "source": 4,
        "relation": "Expert"
      }, {
        "target": 9,
        "source": 4,
        "relation": "New Firm"
      }, {
        "target": 6,
        "source": 5,
        "relation": "Trainee"
      }, {
        "target": 7,
        "source": 5,
        "relation": "Technology;New Firm"
      }]
    };

    var svg = d3.select("svg"),
      width = +svg.attr("width"),
      height = +svg.attr("height");

    var graph = root;

    var w = window,
      d = document,
      e = d.documentElement,
      g = d.getElementsByTagName('body')[0],
      x = w.innerWidth || e.clientWidth || g.clientWidth,
      y = w.innerHeight || e.clientHeight || g.clientHeight;

    var realWidth = width;
    var width = x;
    var height = y;
    var img_w = 24;
    var img_h = 24;
    var k = Math.sqrt(root.nodes.length / (width * height));

    var simulation = d3.forceSimulation()
      .force("link", d3.forceLink().id(function(d) {
        return d.id;
      }).distance(200))
      .force("charge", d3.forceManyBody().strength(-5 / k))
      .force("center", d3.forceCenter(width / 2, height / 2));

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

    var node = svg.append("g")
      .attr("class", "nodes")
      .selectAll("circle")
      .data(graph.nodes)
      .enter().append("image")
      .attr("width", img_w)
      .attr("height", img_h)
      .attr("xlink:href", function(d) {
        return d.image;
      })
      .call(d3.drag()
        .on("start", dragstarted)
        .on("drag", dragged)
        .on("end", dragended));

    var links_text = svg.selectAll(".linetext")
      .data(graph.links)
      .enter()
      .append("text")
      .attr("class", "linetext slds-text-heading--small")
      .attr("text-anchor", "middle")
      .text(function(d) {
        return '[' + d.relation + ']';
      });

    var nodes_text = svg.selectAll(".nodetext")
      .data(graph.nodes)
      .enter()
      .append("text")
      .attr("class", "nodetext slds-text-heading--label")
      .attr("text-anchor", "middle")
      .attr("dx", -20)
      .attr("dy", 20)
      .text(function(d) {
        return (d.subname != '' ? (d.subname + ': ') : '') + d.name;
      });

    simulation
      .nodes(graph.nodes)
      .on("tick", ticked);

    simulation.force("link")
      .links(graph.links);

    function ticked() {
      link
        .attr("x1", function(d) {
          var xPos = d.source.x;
          if (xPos < 0) return 0;
          if (xPos > (960 - img_w)) return (960 - img_w);
          return xPos;
        })
        .attr("y1", function(d) {
          var yPos = d.source.y;
          if (yPos < 0) return 0;
          if (yPos > (600 - img_h)) return (600 - img_h);
          return yPos;
        })
        .attr("x2", function(d) {
          var xPos = d.target.x;
          if (xPos < 0) return 0;
          if (xPos > (960 - img_w)) return (960 - img_w);
          return xPos;
        })
        .attr("y2", function(d) {
          var yPos = d.target.y;
          if (yPos < 0) return 0;
          if (yPos > (600 - img_h)) return (600 - img_h);
          return yPos;
        });

      links_text
        .attr("x", function(d) {
          var xPos = (d.source.x + d.target.x) / 2;
          if (xPos < 0) return 0;
          if (xPos > (960 - img_w)) return (960 - img_w);
          return xPos;
        })
        .attr("y", function(d) {
          var yPos = (d.source.y + d.target.y) / 2;
          if (yPos < 0) return 0;
          if (yPos > (600 - img_h)) return (600 - img_h);
          return yPos;
        });


      node
        .attr("x", function(d) {
          var xPos = (d.x - img_w /2);
          if (xPos < 0) return 0;
          if (xPos > (960 - img_w)) return (960 - img_w);
          return xPos;
        })
        .attr("y", function(d) {
          var yPos = d.y;
          if (yPos < 0) return 0;
          if (yPos > (600 - img_h)) return (600 - img_h);
          return yPos;
        });

      nodes_text
        .attr("x", function(d) {
          return d.x + 20
        })
        .attr("y", function(d) {
          return d.y + img_w / 2;
        });
    }


    function dragstarted(d) {
      if (!d3.event.active) simulation.alphaTarget(0.3).restart();
      d.fx = d.x;
      d.fy = d.y;
    }

    function dragged(d) {
      d.fx = d3.event.x;
      d.fy = d3.event.y;
    }

    function dragended(d) {
      if (!d3.event.active) simulation.alphaTarget(0);
      d.fx = null;
      d.fy = null;
    }
  </script>
</body>

</html>

现在将相同的方法应用于链接......

以下是我已开始实施某些修补程序的示例代码：

＆＃13;
＆＃13; 
db.tochten.find({"_id" : ObjectId("577a6640c27dc10de81b265d")})

{ "_id" : ObjectId("577a6640c27dc10de81b265d"), "datum" : "2016-07-07", "weergavedatum" : "donderdag 7 juli", "begintijd" : "20:00", "eindtijd" : "21:00", "schip" : "Ouwe Dirk", "tocht" : "Rondvaart", "maxaantal" : "40", "opemerkingen" : "", "reserveringen" : [ ] }
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题