Align Marker on node edges D3 Force Layout

by

Interesting question. This works by setting the link path normally, then recalculating the end position by backing off the length by the radius of the circle.

First in the marker def, set the refX and refY to 0 (this is the current way it stays outside the circle):

  .attr("refX", 0)
  .attr("refY", 0)

Then do:

function tick() {

  // fit path like you've been doing
  path.attr("d", function(d){
    var dx = d.target.x - d.source.x,
        dy = d.target.y - d.source.y,
        dr = Math.sqrt(dx * dx + dy * dy);
    return "M" + d.source.x + "," + d.source.y + "A" + dr + "," + dr + " 0 0,1 " + d.target.x + "," + d.target.y;
  });

  // recalculate and back off the distance
  path.attr("d", function(d) {

    // length of current path
    var pl = this.getTotalLength(),
        // radius of circle plus marker head
        r = (d.target.weight) * 4 + 16.97, //16.97 is the "size" of the marker Math.sqrt(12**2 + 12 **2)
        // position close to where path intercepts circle
        m = this.getPointAtLength(pl - r);          

     var dx = m.x - d.source.x,
        dy = m.y - d.source.y,
        dr = Math.sqrt(dx * dx + dy * dy);

      return "M" + d.source.x + "," + d.source.y + "A" + dr + "," + dr + " 0 0,1 " + m.x + "," + m.y;
  });

  circle.attr("transform", transform);
  text.attr("transform", transform);
}

Running code:

<!DOCTYPE html>
<html>

<head>
  <script data-require="[email protected]" data-semver="3.5.17" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.js"></script>
  <style>
    path.link {
      fill: none;
      stroke: #666;
      stroke-width: 1.5px;
    }
    
    circle {
      fill: #ccc;
      stroke: #fff;
      stroke-width: 1.5px;
    }
    
    text {
      fill: #000;
      font: 10px sans-serif;
      pointer-events: none;
    }
  </style>
</head>

<body>
  <script>
    var links = [{
      "source": "Harry",
      "target": "Sally",
      "value": "1.2"
    }, {
      "source": "Harry",
      "target": "Mario",
      "value": "1.3"
    }, {
      "source": "Sarah",
      "target": "Alice",
      "value": "0.2"
    }, {
      "source": "Eveie",
      "target": "Alice",
      "value": "0.5"
    }, {
      "source": "Peter",
      "target": "Alice",
      "value": "1.6"
    }, {
      "source": "Mario",
      "target": "Alice",
      "value": "0.4"
    }, {
      "source": "James",
      "target": "Alice",
      "value": "0.6"
    }, {
      "source": "Harry",
      "target": "Carol",
      "value": "0.7"
    }, {
      "source": "Harry",
      "target": "Nicky",
      "value": "0.8"
    }, {
      "source": "Bobby",
      "target": "Frank",
      "value": "0.8"
    }, {
      "source": "Alice",
      "target": "Mario",
      "value": "0.7"
    }, {
      "source": "Harry",
      "target": "Alice",
      "value": "0.5"
    }, {
      "source": "Sarah",
      "target": "Alice",
      "value": "1.9"
    }, {
      "source": "Roger",
      "target": "Alice",
      "value": "1.1"
    }];

    var nodes = {};

    // Compute the distinct nodes from the links.
    links.forEach(function(link) {
      link.type = "dominating";
      link.source = nodes[link.source] || (nodes[link.source] = {
        name: link.source
      });
      link.target = nodes[link.target] || (nodes[link.target] = {
        name: link.target
      });
    });

    var width = 500,
      height = 500;

    var force = d3.layout.force()
      .nodes(d3.values(nodes))
      .links(links)
      .size([width, height])
      .linkDistance(300)
      .charge(-120)
      .friction(0.9)
      .on("tick", tick)
      .start();

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

    // Per-type markers, as they don't inherit styles.
    svg.append("defs").selectAll("marker")
      .data(["dominating"])
      .enter().append("marker")
      .attr("id", function(d) {
        return d;
      })
      .attr("viewBox", "0 -5 10 10")
      .attr("refX", 0)
      .attr("refY", 0)
      .attr("markerWidth", 12)
      .attr("markerHeight", 12)
      .attr("orient", "auto")
      .append("path")
      .attr("d", "M0,-5L10,0L0,5");

    svg.append("defs").selectAll("marker")
      .data(["concomidant"])
      .enter().append("marker")
      .attr("id", function(d) {
        return d;
      })
      .attr("viewBox", "0 -5 10 10")
      .attr("refX", 0)
      .attr("refY", 0)
      .attr("markerWidth", 12)
      .attr("markerHeight", 12)
      .attr("orient", "auto-start-reverse")
      .append("path")
      .attr("d", "M0,-5L10,0L0,5");

    var path = svg.append("g").selectAll("path")
      .data(force.links())
      .enter().append("path")
      .attr("class", function(d) {
        return "link " + d.type;
      })
      .attr("marker-end", function(d) {
        return "url(#" + d.type + ")";
      })
      .attr("marker-start", function(d) {
        if (d.type == "concomidant") {
          return "url(#" + d.type + ")";
        }
      });


    var circle = svg.append("g").selectAll("circle")
      .data(force.nodes())
      .enter().append("circle")
      .attr("r", function(d) {
        return d.weight * 4;
      })
      .call(force.drag);

    var text = svg.append("g").selectAll("text")
      .data(force.nodes())
      .enter().append("text")
      .attr("x", 8)
      .attr("y", ".31em")
      .text(function(d) {
        return d.name;
      });

    function tick() {
      path.attr("d", function(d){
        var dx = d.target.x - d.source.x,
            dy = d.target.y - d.source.y,
            dr = Math.sqrt(dx * dx + dy * dy);
        return "M" + d.source.x + "," + d.source.y + "A" + dr + "," + dr + " 0 0,1 " + d.target.x + "," + d.target.y;
      });
      path.attr("d", function(d) {
        var pl = this.getTotalLength(),
          r = (d.target.weight) * 4 + 16.97, //16.97 is the "size" of the marker Math.sqrt(12**2 + 12 **2)
          m = this.getPointAtLength(pl - r);

         var dx = m.x - d.source.x,
            dy = m.y - d.source.y,
            dr = Math.sqrt(dx * dx + dy * dy);

          return "M" + d.source.x + "," + d.source.y + "A" + dr + "," + dr + " 0 0,1 " + m.x + "," + m.y;
      });
      circle.attr("transform", transform);
      text.attr("transform", transform);
    }
    

    function transform(d) {
      return "translate(" + d.x + "," + d.y + ")";
    }
  </script>
</body>

</html>

More Related Contents:

  1. Highlight selected node, its links, and its children in a D3 force directed graph
  2. Fix Node Position in D3 Force Directed Layout
  3. Why does d3.js v3 break my force graph when implementing zooming when v2 doesn’t?
  4. Add text label to d3 node in Force layout
  5. Is there a way to zoom into a D3 force layout graph?
  6. Adding new nodes to Force-directed layout
  7. Add text label to d3 node in Force directed Graph and resize on hover
  8. Display an arrow head in the middle of D3 force layout link
  9. D3.js: Remove force.drag from a selection
  10. clicking a node in d3 from a button outside the svg
  11. How to load data from a CSV file in D3 v5
  12. Cannot use attr with an object in D3 v4
  13. variable scope in d3 javascript
  14. Scaling d3 v4 map to fit SVG (or at all)
  15. Replacing d3.transform in D3 v4
  16. How do I include newlines in labels in D3 charts?
  17. Invoke a callback at the end of a transition
  18. D3.js Map with Albers Projection: How to rotate it?
  19. Generate (multilevel) flare.json data format from flat json
  20. How to use x and width in a bar chart with scaleTime?
  21. d3 js – loading json without a http get
  22. nvd3 piechart.js – How to edit the tooltip?
  23. How do I return y coordinate of a path in d3.js?
  24. Appending multiple non-nested elements for each data member with D3.js
  25. Calculate SVG Path Centroid with D3.js
  26. Change and transition dataset in chord diagram with D3
  27. Using d3 to shade area between two lines
  28. D3: How do I set “click” event and “dbclick” event at the same time?
  29. D3 Tree Layout Separation Between Nodes using NodeSize
  30. How to get the total depth of an unknown JSON hierarchy?

Leave a Comment