CODEWITHSUNDEEP
javascriptd3.jssvg
user8109102
user8109102

Reputation:

Multiple force-directed graphs in 1 svg (problems with text display)

I want to display multiple force directed graphs. Preferably with only using 1 svg element as well (as I think that increases performance as well as let me make a width and height for whole simulation as this may differ based on data).

My first thought and with some research I just did a for loop, re-evaluated my nodes/edges arrays and put that in a function that generates the force-directed graph. 

 for (var i = 0; i < sampleData.length; i++)
{
            var nodes = [];     
    var edges = [];

            x = x+100; //update position (i want to show grpahs side by side.)          

    root = sampleData[i];

    nodes.push({"name": root, "x": x, "y": y, "fixed": true, "color": "purple"}); 

        //These 2 recurisve functions generate my nodes and edges array just fine. 
     buildParents(childs, parents, test, counter);         
     buildChildren(childs, parents, test, counter);

     //apply id to each node
        nodes.forEach((d,i)=>d.generatedId='id'+i);

            //build makes the force-directed layout.
        build(nodes, edges);

}

This actually appears to work fine for me with my nodes and links. My issue is the text does not display for all nodes like it does if I only pass in one set of data. I have text defined as so in the force simulation:

var nodes_text = svg.selectAll(".nodetext")
        .data(nodes)
        .enter()
        .append("text")
        .attr("class", "nodetext slds-text-heading--label")
        .attr("text-anchor", "middle")
        .attr("dx", -20)
        .attr("dy", 20)
        .text(d=>d.name)
        .attr('opacity',0)

I was able to reproduce this error by just making 2 arrays for nodes and 2 arrays for edges and passing it into a simulation. Here is a simple program that reproduces my error: https://jsfiddle.net/mg8b46aj/9/

I think fixing this JFiddle would give me the right idea on how to put it in my program.

So I just call the build function twice (either order is error). The left node has text but one of them isn't the correct text field. Also dragging it around a little bit makes it "leave" its text behind. The right graph has nothing.

Edit: And clicking the a node on the right graph seems to reset the text positions.

Upvotes: 1

Views: 335

Answers (1)

Gilsha
Gilsha

Reputation: 14591

The problem is with the d3 selector use for selecting labels. As you need two separate force layout diagrams, you should use a selector as shown below for labels.

var nodes_text = svg.append('g') //Append new group for labels in new diagram 
        .attr("class", "labels")
        .selectAll(".nodetext")
        .data(nodes)
        .enter()
        .append("text");

Updated Fiddle: https://jsfiddle.net/gilsha/qe7bbnwn/1/

Upvotes: 0

Related Questions