I have created a force directed graph but I'm unable to add text to the links created.

How can I do so?

Following is my code link

I have used the following line to append the titles on the link's, but its not ing.

link.append("title")
  .text(function (d) {
     return d.value;
   });

What am I doing wrong with this ?

I have created a force directed graph but I'm unable to add text to the links created.

How can I do so?

Following is my code link

I have used the following line to append the titles on the link's, but its not ing.

link.append("title")
  .text(function (d) {
     return d.value;
   });

What am I doing wrong with this ?

• javascript
• svg
• d3.js
• label
• force-layout

Share Improve this question Follow edited Jan 11, 2015 at 18:02 VividD 10.5k88 gold badges6666 silver badges112112 bronze badges asked May 5, 2014 at 10:33 analyticalpicassoanalyticalpicasso 1,99388 gold badges2626 silver badges4545 bronze badges 10

• 1 do you want to add label or tooltip to the link? From code, it looks tooltip, but from text it seems label... – VividD Commented May 5, 2014 at 10:58
• @VividD I actually want to add label. – analyticalpicasso Commented May 5, 2014 at 11:17
• It's a bit more plicated than that to place labels along the edges/links...see here and here. – FernOfTheAndes Commented May 5, 2014 at 11:35
• This question may help. – Lars Kotthoff Commented May 5, 2014 at 11:36
• 1 I pleted the answer with some additional info, hopefully this will be sufficient for you to solve your situation! – VividD Commented May 5, 2014 at 12:10

 |  Show 5 more ments

1 Answer 1

Sorted by: Reset to default 11

This link contains the solution that you need.

The key point here is that "title" adds tooltip. For label, you must provide slightly more plex (but not overly plicated) code, like this one from the example from the link above:

// Append text to Link edges
var linkText = svgCanvas.selectAll(".gLink")
    .data(force.links())
    .append("text")
    .attr("font-family", "Arial, Helvetica, sans-serif")
    .attr("x", function(d) {
        if (d.target.x > d.source.x) {
            return (d.source.x + (d.target.x - d.source.x)/2); }
        else {
            return (d.target.x + (d.source.x - d.target.x)/2); }
    })
    .attr("y", function(d) {
        if (d.target.y > d.source.y) {
            return (d.source.y + (d.target.y - d.source.y)/2); }
        else {
            return (d.target.y + (d.source.y - d.target.y)/2); }
    })
    .attr("fill", "Black")
    .style("font", "normal 12px Arial")
    .attr("dy", ".35em")
    .text(function(d) { return d.linkName; });

The idea of the code is simple: It calculates the midpoint of the link, and displays some text at that place (you can decide what that text actually is). There are some additional calculations and conditions, you can figure it out from the code, however you'll anyway want to change them depending on your needs and aesthetics.

EDIT: Important note here is that "gLink" is the name of the class of links, previously defined with this code:

// Draw lines for Links between Nodes
var link = svgCanvas.selectAll(".gLink")
    .data(force.links())

In your example, it may be different, you need to adjust the code.

---

---

Here is a guide how to incorporate solution from example above to another example of force layout that doesn't have link labels:

SVG Object Organization and Data Binding

In D3 force-directed layouts, layout must be supplied with array of nodes and links, and force.start() must be called. After that, visual elements may be created as requirements and desing say. In our case, following code initializes SVG "g" element for each link. This "g" element is supposed to contain a line that visually represent link, and the text that corresponds to that link as well.

force
    .nodes(graph.nodes)
    .links(graph.links)
    .start();

var link = svg.selectAll(".link")
    .data(graph.links)
   .enter()
    .append("g")
    .attr("class", "link")
    .append("line")
    .attr("class", "link-line")
    .style("stroke-width", function (d) {
        return Math.sqrt(d.value);
    });

var linkText = svg.selectAll(".link")
    .append("text")
    .attr("class", "link-label")
   .attr("font-family", "Arial, Helvetica, sans-serif")
    .attr("fill", "Black")
    .style("font", "normal 12px Arial")
    .attr("dy", ".35em")
    .attr("text-anchor", "middle")
    .text(function(d) {
        return d.value;
    });

"g" elements have class "link", lines have class "link-line", ad labels have class "link-label". This is done so that "g" elements may be easily selected, and lines and labels can be styled in CSS file conveninetly via classes "link-line" and "link-label" (though such styling is not used in this example).

Initialization of positions of lines and text is not done here, since they will be updated duting animation anyway.

Force-directed Animation

In order for animation to be visible, "tick" function must contain code that determine position of lines and text:

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

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

Here is the resulting example: plunker