3

I am building a tree structure showing the Facebook user and his/her Facebook friends using D3.js. The root is the user and the child nodes are the friends. I have a fixed width in my UI and the problem is the child nodes will overlap to each other. 

              var nodes = tree.nodes(root).reverse(),
               links = tree.links(nodes);

              nodes.forEach(function(d) { d.y = d.depth * 130; });

              var node = svg.selectAll("g.node")
               .data(nodes, function(d) { return d.id || (d.id = ++i); });

              var nodeEnter = node.enter().append("g")
               .attr("class", "node")
               .attr("value", function(d){
                return d.id; })
               .attr("transform", function(d) { 
                return "translate(" + d.x + "," + d.y + ")"; });

              var defs = node.append("defs").attr("id", "imgdefs");

              var imgPattern = defs.append("pattern")
                    .attr("id", "img")
                    .attr("height", 50)
                    .attr("width", 50)
                    .attr("x", "0")
                    .attr("y", "0");


                imgPattern.append("image")
                     .attr("height", 60)
                     .attr("width", 60)
                     .attr("xlink:href", function(d) { return d.img; });

                nodeEnter.append("circle")
                    .attr("r", 30)
                    .style("stroke","white")
                    .style("stroke-width", 4)
                    .attr("fill", "url(#img)");

I would like to display 10 friends per row/depth for the child nodes. Any help or suggestions please. Thank you!

Here is my jsfiddle: CODE HERE

Kentarou
  • 51
  • 1
  • 5

1 Answers1

4

One way to accomplish this is to set the nodeSize and separation properties of the tree layout. Here is the snippet:

var tree = d3.layout.tree()
    //.size([height, width])
    .nodeSize([30,])
    .separation(function separation(a, b) {
        return a.parent == b.parent ? 2 : 1;
    });

I set the x dimension of the nodeSize property equal to the radius of the circles.

Also, a change in the g transform is necessary to reposition the chart:

.attr("transform", "translate(" + (margin.left + width/2) + "," + margin.top + ")");

You can safely ignore the size property (see documentation in the link above and this SO answer).

Here is a FIDDLE with the changes. I added another row of circles at a different depth to check whether the solution was robust enough. I think this should get you going.

Community
  • 1
  • 1
FernOfTheAndes
  • 4,975
  • 2
  • 17
  • 25
  • Thank you so much for the response... I would like to ask how to change the link of the last row(3 images) to connect to the parent node? – Kentarou Sep 24 '14 at 02:39
  • @Kentarou YW. The original intent of the question was to solve the issue of overlapping. If the answer solved this, you should accept the answer. As for the question in your comment, by the last row do you mean the row that I added to your original data? – FernOfTheAndes Sep 24 '14 at 10:51