Add text/label onto links in D3 force directed graph

by

enter image description here

Use a smaller example outside of D3 to see how the SVG stuff works. Then just rebuild this structure using D3 and your custom data.

<html>
    <body>

<svg width="600px" height="400px">

    <defs>
        <!-- DEFINE AN ARROW THAT WE CAN PLACE AT THE END OF EDGES. -->
        <!-- USE REFX TO MOVE THE ARROW'S TIP TO THE END OF THE PATH. -->
        <marker
            orient="auto"
            markerHeight="12"
            markerWidth="12"
            refY="0"
            refX="9"
            viewBox="0 -5 10 10"
            id="ARROW_ID"
            style="fill: red; fill-opacity: 0.5;">

            <path d="M0, -5L10, 0L0, 5"></path>

        </marker>
    </defs>

    <!-- DEFINE A PATH. SET ITS END MARKER TO THE ARROW'S ID. -->
    <!-- SET FILL NONE TO DRAW A LINE INSTEAD OF A SHAPE. -->
    <path
        d="M100,100 A300,250 0 0,1 500,300"
        style="fill:none; stroke:grey; stroke-width:2px;"
        id="PATH_ID"
        marker-end="url(#ARROW_ID)" />

    <!-- DEFINE A TEXT ELEMENT AND SET FONT PROPERTIES. -->
    <!-- USE DY TO MOVE TEXT ABOVE THE PATH. -->
    <text
        style="text-anchor:middle; font: 16px sans-serif;"
        dy="-12">

        <!-- DEFINE A TEXT PATH FOLLOWING THE PATH DEFINED ABOVE. -->
        <!-- USE STARTOFFSET TO CENTER TEXT. -->
        <textPath
            xlink:href="#PATH_ID"
            startOffset="50%">Centered edge label</textPath>
    </text>

</svg>

    </body>
</html>

More Related Contents:

  1. semantic zooming of the force directed graph in d3
  2. Add text label to d3 node in Force directed Graph and resize on hover
  3. d3 Node Labeling
  4. How to convert/save d3.js graph to pdf/jpeg
  5. Label outside arc (Pie chart) d3.js
  6. Why does d3.js v3 break my force graph when implementing zooming when v2 doesn’t?
  7. Add text label to d3 node in Force layout
  8. Display an arrow head in the middle of D3 force layout link
  9. Updating SVG Element Z-Index With D3
  10. Remove the host HTML element selectors created by angular component
  11. D3 Appending Text to a SVG Rectangle
  12. Scale and mirror SVG object
  13. In d3, how to get the interpolated line data from a SVG line?
  14. Creating and appending detached elements with d3.create
  15. D3js take data from an array instead of a file
  16. Where is d3.svg.diagonal()?
  17. How to place multiple evenly-spaced arrowheads along an SVG line?
  18. D3 fill shape with image using pattern
  19. SVG Positioning
  20. How can I cut one shape inside another?
  21. Setting rounded corners for svg:image
  22. Can I apply a gradient along an SVG path?
  23. svg / d3.js rounded corners on one side of a rectangle
  24. SVG to Canvas with d3.js
  25. Drawing multiple edges between two nodes with d3
  26. Simple fill pattern in svg : diagonal hatching
  27. Can’t make paths draw growing slowly with D3
  28. How to dynamically display a multiline text in D3.js?
  29. clicking a node in d3 from a button outside the svg
  30. Convert SVG polygon to path

Leave a Comment