Display an arrow head in the middle of D3 force layout link

by

Instead of placing the marker on an end, create your lines (<polyline> or <path>) with a single point in the middle of the line and use marker-mid to apply the arrowheads.

This demo for this answer of mine uses this technique to create multiple interior points along the length of a path along with marker-mid. You would simply be creating a single ‘waypoint’ instead of many.

Edit: Here’s a simple hack to the existing demo showing what I mean:

Demo: http://jsfiddle.net/tk7Wv/2/

Arrowheads in the middle of curves

The only changes are:

  1. Changing marker-end to marker-mid, and
  2. Modifying the path generation code to create two arcs (connected in the middle) instead of one.

It will require some simple trigonometry like Superboggly illustrates to pick an appropriate midpoint based on the amount of bowing you want in your lines.

More Related Contents:

  1. Why does d3.js v3 break my force graph when implementing zooming when v2 doesn’t?
  2. Add text label to d3 node in Force directed Graph and resize on hover
  3. Scaling d3 v4 map to fit SVG (or at all)
  4. How to add a tooltip to an svg graphic?
  5. Highlight selected node, its links, and its children in a D3 force directed graph
  6. Replacing d3.transform in D3 v4
  7. How do I include newlines in labels in D3 charts?
  8. Fix Node Position in D3 Force Directed Layout
  9. Updating SVG Element Z-Index With D3
  10. D3 Appending Text to a SVG Rectangle
  11. In d3, how to get the interpolated line data from a SVG line?
  12. Creating and appending detached elements with d3.create
  13. Label outside arc (Pie chart) d3.js
  14. D3js take data from an array instead of a file
  15. Where is d3.svg.diagonal()?
  16. (Embed and) Refer to an external SVG via D3 and/or javascript
  17. Plotting points on a map with D3
  18. D3 fill shape with image using pattern
  19. Add text label to d3 node in Force layout
  20. Setting rounded corners for svg:image
  21. How do I save/export an SVG file after creating an SVG with D3.js (IE, safari and chrome)?
  22. Is there a way to zoom into a D3 force layout graph?
  23. svg / d3.js rounded corners on one side of a rectangle
  24. SVG to Canvas with d3.js
  25. Adding new nodes to Force-directed layout
  26. How do I return y coordinate of a path in d3.js?
  27. Can’t make paths draw growing slowly with D3
  28. draw text in d3 arc javascript
  29. D3 put arc labels in a Pie Chart if there is enough space
  30. clicking a node in d3 from a button outside the svg

Leave a Comment