CODEWITHSUNDEEP
javascriptarraystreed3.js
Mahi G
Mahi G

Reputation: 13

LINKS IN Collapsible Tree in D3.js

I am new to D3 so I want to figure out some of the following things in this tree layout example(http://bl.ocks.org/mbostock/4339083) .

  1. How can I add Names to Links(edges) that is if there is a link from A to B(B is child of A) then show the name of B on link.
  2. How can I change the width of the link based on the size given in child, that is if there is a link from A to B and size of B is 50 then the link's width should be 50px.

Please help me solve these problems as i'm not able to understand the way it has to be done.

Thank you.

Upvotes: 0

Views: 1429

Answers (1)

Lars Kotthoff
Lars Kotthoff

Reputation: 109232

For labels, you need to append text elements to the link paths:

link.enter().insert("text", "g")
  .attr("x", function(d) { return (d.source.x+d.target.x)/2; })
  .attr("y", function(d) { return (d.source.y+d.target.y)/2; })
  .text(function(d) { return d.target.name; });

You may want to adjust the label positions.

To change the width of the link, you need to set the stroke-width attribute of the path:

link.enter().insert("path", "g")
  .attr("class", "link")
  .attr("stroke-width", function(d) { return d.target.size; })
  .attr("d", function(d) {
    var o = {x: source.x0, y: source.y0};
    return diagonal({source: o, target: o});
  });

Upvotes: 2

Related Questions