Having trouble converting a D3 v3 Force Directed graph into D3 v4 library implementation?

Question

I've recently created my first force directed graph using v3 library, but now I'm required to create the same graph using D3 version 4 library, but the methods have changed tremendously in v4, and now I'm getting error at all force()/drag() methods of 3 that do not exist now in v4.

My graph is based on following mockup - http://www.ourd3js.com/wordpress/?p=606

Is there a repository of samples that have been created in v4 library of d3 someplace where I can take a look and learn few functions that I can replace with for this particular chart?

EDIT:

My current code looks like this, but I'm not able to convert it completely, for example, the node links are very close sometimes that text of links and nodes is overlapping.

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

Javascript Code:

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

The JSON Data String:

  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"
  } ]
};

Mark · Accepted Answer

You are asking a flurry of questions all at once, so let's get a little sanity on this question.

First, the linkDistance is now distance on the d3.forceLink, so in your code:

.force("link", d3.forceLink().id(function(d) { return d.id; }).distance(200))

Second, to center your image, do this when you set it's x position:

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

Third, to do boundary detection you need to implement this yourself. For example, to fix the nodes position would be (building on last code snippet):

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

Now apply the same methodology to the links...

Here's some example code where I've started to implement some fixes:

<!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>

Having trouble converting a D3 v3 Force Directed graph into D3 v4 library implementation?

Tags:

d3.js

VarunC

1 Answers

Mark

Recent Activity

Donate For Us

Having trouble converting a D3 v3 Force Directed graph into D3 v4 library implementation?

Tags:

d3.js

VarunC

1 Answers

Mark

Related questions

Recent Activity

Donate For Us