CODEWITHSUNDEEP
javascriptd3.js
Suresh Somasundaram
Suresh Somasundaram

Reputation: 33

How to add link name on the line d3.js?

I can able to display the nodes and able to connect the nodes by the link dynamically. Here i am displaying the image instead of nodes(circle). but i am trying to display the link name on the top of the line. I have gone through some of the links but am not able to display the name.

I can see the text element in the browser inspect element. But the text is not visible. Here is my code.

var nodes = [{"x":100,"y":240,"image":"/fpui/img/lan.png"},{"x":230,"y":240,"image":"/fpui/img/mpvpn_boxsmall.png"},{"x":360,"y":120,"image":"/fpui/img/router.png"},{"x":360,"y":240,"image":"/fpui/img/router.png"},{"x":360,"y":360,"image":"/fpui/img/router.png"},{"x":490,"y":120,"image":"/fpui/img/isp.png"},{"x":490,"y":240,"image":"/fpui/img/isp.png"},{"x":490,"y":360,"image":"/fpui/img/isp.png"},{"x":620,"y":240,"image":"/fpui/img/internet.png"},{"x":750,"y":120,"image":"/fpui/img/server.png"},{"x":750,"y":240,"image":"/fpui/img/server.png"},{"x":750,"y":360,"image":"/fpui/img/server.png"}] jquery-2.0.2.min.js line 4 > eval:405:1
var links = [{"source":0,"target":1,"class":"link-green","name":"LAN"},{"source":1,"target":2,"class":"link-green","name":"WAN1"},{"source":1,"target":3,"class":"link-green","name":"WAN2"},{"source":1,"target":4,"class":"link-green","name":"WAN3"},{"source":2,"target":5,"name":"","class":"link-green"},{"source":3,"target":6,"name":"","class":"link-green"},{"source":4,"target":7,"name":"","class":"link-green"},{"source":5,"target":8,"class":"link-green","name":""},{"source":6,"target":8,"class":"link-green","name":""},{"source":7,"target":8,"class":"link-green","name":""},{"source":8,"target":9,"class":"link-green","name":""},{"source":8,"target":10,"class":"link-green","name":""},{"source":8,"target":11,"class":"link-green","name":""}]

var svg = d3.select('#routeTestDisplay').append('svg')
        .attr('width', width)
        .attr('height', height);

    var force = d3.layout.force()
        .size([width, height])
        .nodes(nodes)
        .links(linkArr)
        .start();
    force.linkDistance(200);
    var link = svg.selectAll('.link')
        .data(linkArr)
        .enter().append('line')
        /*.attr('class', 'link')
         .style("stroke", function(d,i){
         return color(i)
         })*/
        .style("stroke-width", 3);

        link.append("text")
        .attr("class", "link-label")
        .attr("font-family", "Arial, Helvetica, sans-serif")
        .attr("fill", "Black")
        .style("font", "normal 12px Arial")
        .style("color", "black")
        .attr("dy", ".35em")
        .attr("text-anchor", "middle")
        .text(function(d) {
            return d.name;
        })
            .attr("x", function(d) {
                return ((d.source.x + d.target.x)/2);
            })
            .attr("y", function(d) {
                return ((d.source.y + d.target.y)/2);
            });



    var node = svg.selectAll('.node')
        .data(nodes)
        .enter().append('svg:image')
        .attr("width", 50)
        .attr("height", 50)

    node.attr('r', 30)
        .attr("xlink:href", function(d) {
            return d.image;
        })
        .attr('x', function(d) {
            return d.x - 15;
        })
        .attr('y', function(d) {
            return d.y - 30;
        });
    link.attr('class', function(d) {
        return d.class;
    });
    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;
        });

Could you please anyone help how to achieve this?

Upvotes: 0

Views: 1089

Answers (2)

thatOneGuy
thatOneGuy

Reputation: 10632

You cant append text to a line, you have to append the line and the text to the same parent like so :

var link = svg.selectAll('.link')
    .data(links)
    .enter().append('g') 
    .attr('class', 'link');

var singlelink= link.append('line') //set this as a variable to translate later
   .style('stroke', 'black')
  .style("stroke-width", 3);

link.append("text")
  .attr("class", "link-label") ...

As mentioned in the comments of the code, I have to set the line where you append the line to the link variable to its own variable as at the moment you were translating the link. But the link is now a container not the line itself. So your translate function later on will now look like : 

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

Full working code : 

var nodes = [{
  "x": 100,
  "y": 240,
  "image": "/fpui/img/lan.png"
}, {
  "x": 230,
  "y": 240,
  "image": "/fpui/img/mpvpn_boxsmall.png"
}, {
  "x": 360,
  "y": 120,
  "image": "/fpui/img/router.png"
}, {
  "x": 360,
  "y": 240,
  "image": "/fpui/img/router.png"
}, {
  "x": 360,
  "y": 360,
  "image": "/fpui/img/router.png"
}, {
  "x": 490,
  "y": 120,
  "image": "/fpui/img/isp.png"
}, {
  "x": 490,
  "y": 240,
  "image": "/fpui/img/isp.png"
}, {
  "x": 490,
  "y": 360,
  "image": "/fpui/img/isp.png"
}, {
  "x": 620,
  "y": 240,
  "image": "/fpui/img/internet.png"
}, {
  "x": 750,
  "y": 120,
  "image": "/fpui/img/server.png"
}, {
  "x": 750,
  "y": 240,
  "image": "/fpui/img/server.png"
}, {
  "x": 750,
  "y": 360,
  "image": "/fpui/img/server.png"
}] 
//jquery - 2.0.2. min.js line 4 > eval: 405: 1
var links = [{
  "source": 0,
  "target": 1,
  "class": "link-green",
  "name": "LAN"
}, {
  "source": 1,
  "target": 2,
  "class": "link-green",
  "name": "WAN1"
}, {
  "source": 1,
  "target": 3,
  "class": "link-green",
  "name": "WAN2"
}, {
  "source": 1,
  "target": 4,
  "class": "link-green",
  "name": "WAN3"
}, {
  "source": 2,
  "target": 5,
  "name": "",
  "class": "link-green"
}, {
  "source": 3,
  "target": 6,
  "name": "",
  "class": "link-green"
}, {
  "source": 4,
  "target": 7,
  "name": "",
  "class": "link-green"
}, {
  "source": 5,
  "target": 8,
  "class": "link-green",
  "name": ""
}, {
  "source": 6,
  "target": 8,
  "class": "link-green",
  "name": ""
}, {
  "source": 7,
  "target": 8,
  "class": "link-green",
  "name": ""
}, {
  "source": 8,
  "target": 9,
  "class": "link-green",
  "name": ""
}, {
  "source": 8,
  "target": 10,
  "class": "link-green",
  "name": ""
}, {
  "source": 8,
  "target": 11,
  "class": "link-green",
  "name": ""
}]
console.log(links)
var width = 1500,height=1500;
var svg = d3.select('#routeTestDisplay').append('svg')
  .attr('width', width)
  .attr('height', height);

var force = d3.layout.force()
  .size([width, height])
  .nodes(nodes)
  .links(links)
  .start();
force.linkDistance(200);

var link = svg.selectAll('.link')
    .data(links)
    .enter().append('g') 
    .attr('class', 'link');
var singlelink= link.append('line')
   .style('stroke', 'black')
  .style("stroke-width", 3);

link.append("text")
  .attr("class", "link-label")
  .attr("font-family", "Arial, Helvetica, sans-serif")
  .attr("fill", "Black")
  .style("font", "normal 12px Arial")
  .style("color", "black")
  .attr("dy", ".35em")
  .attr("text-anchor", "middle")
  .text(function(d) {
    return d.name;
  })
  .attr("x", function(d) {
    return ((d.source.x + d.target.x) / 2);
  })
  .attr("y", function(d) {
    return ((d.source.y + d.target.y) / 2);
  });



var node = svg.selectAll('.node')
  .data(nodes)
  .enter().append('svg:image')
  .attr("width", 50)
  .attr("height", 50)

node.attr('r', 30)
  .attr("xlink:href", function(d) {
    return "https://www.petfinder.com/wp-content/uploads/2012/11/140272627-grooming-needs-senior-cat-632x475.jpg"
  })
  .attr('x', function(d) {
    return d.x - 15;
  })
  .attr('y', function(d) {
    return d.y - 30;
  });
  
link.attr('class', function(d) {
  return d.class;
});

singlelink.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;
  });
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div id='routeTestDisplay'></div>

P.S

Just a side note, I had to edit the name of the link array you were using and also the images as obviously the links to them wouldn't work

Upvotes: 1

tarulen
tarulen

Reputation: 2100

You cannot nest a text element within a line, they need to be independent DOM elements. To make them have the same data, you can place them together in a g block:

 var link = svg.selectAll('.link')
    .data(linkArr)
    .enter().append('g') //link now represents the selection of  g elements  
    .attr('class', 'link') //class can be tricky: here I put the class on the g object, you might want to have a separate one for the line object.

link.append('line') 
    /*.attr('class', 'link')
     .style("stroke", function(d,i){
     return color(i)
     })*/
    .style("stroke-width", 3);

link.append("text")
    (...)

Upvotes: 0

Related Questions