CODEWITHSUNDEEP
javascriptcssd3.jssvgvisualization
Rohit Pandey
Rohit Pandey

Reputation: 2681

Loop through SVG circles in directed graph

I have been going through some code I found online for creating and playing with directed graphs in D3 (http://bl.ocks.org/cjrd/6863459). I asked a question about this yesterday - Directed graph - node level CSS styles and that gave me a general idea of how to add CSS styles to SVG objects. However, I am still unable to do what I want. This is because, in the JS file, they seem to use the "nodes" to create "circles" and then render them all in one go instead of looping through them. In the updateGraph function, we have the lines - 

// add new nodes
var newGs= thisGraph.circles.enter()
      .append("g");

newGs.classed(consts.circleGClass, true)
  .attr("transform", function(d){return "translate(" + d.x + "," + d.y + ")";})
  .on("mouseover", function(d){
    if (state.shiftNodeDrag){
      d3.select(this).classed(consts.connectClass, true);
    }
  })
  .on("mouseout", function(d){
    d3.select(this).classed(consts.connectClass, false);
  })
  .on("mousedown", function(d){
    thisGraph.circleMouseDown.call(thisGraph, d3.select(this), d);
  })
  .on("mouseup", function(d){
    thisGraph.circleMouseUp.call(thisGraph, d3.select(this), d);
  })
  .call(thisGraph.drag);

First of all, I am not sure what the .append("g") means here. But more importantly, the line where the CSS class is applied,

newGs.classed(consts.circleGClass, true)

seems to apply the class to all "circles" in one line. Instead, I want to loop through each node and for the circle of that node, apply a CSS style based on attributes of the node (to keep things simple, lets say that it the "title" starts with a certain text, I want to make it a blue circle). I still have no idea how to do this. Can someone help here? Again, the answers to my previous question helped a lot in understanding CSS but this other issue is still blocking me from doing what I want.

Upvotes: 1

Views: 463

Answers (1)

Cyril Cherian
Cyril Cherian

Reputation: 32327

Adding comments for more clarity.

// here thisGraph.circles is data selection
//so if the data array has 10 elements in array it will generate 10 g or groups.
var newGs= thisGraph.circles.enter()
      .append("g");
//here we are adding classes to the g
newGs.classed(consts.circleGClass, true)
  .attr("transform", function(d){return "translate(" + d.x + "," + d.y + ")";})
  //attaching mouse event to the group
  .on("mouseover", function(d){
    if (state.shiftNodeDrag){
      d3.select(this).classed(consts.connectClass, true);
    }
  })
  .on("mouseout", function(d){
    d3.select(this).classed(consts.connectClass, false);
  })
  .on("mousedown", function(d){
    thisGraph.circleMouseDown.call(thisGraph, d3.select(this), d);
  })
  .on("mouseup", function(d){
    thisGraph.circleMouseUp.call(thisGraph, d3.select(this), d);
  })
  .call(thisGraph.drag);//attaching drag behavior to the group

What does this line mean?

newGs.classed(consts.circleGClass, true)

This line means to add class to all the created g DOM element or group. In the code you referring it means circleGClass: "conceptG" Read this on how to add CSS to DOM in D3

In the code you are appending circle to the group like this 

newGs.append("circle")
      .attr("r", String(consts.nodeRadius));

So now each group will have a circle.

Next Question

I want to loop through each node and for the circle of that node, apply a CSS style based on attributes of the node

You can iterate through all the circles and add style depending on the data associated with the node like this.

newGs.append("circle")
      .attr("r", String(consts.nodeRadius))
      .style("fill", function(d){
        if(d)//some condition on data
        {
          return "red";

        } 
        else 
        return "blue";

      });

Question: if you could tell me how to add CSS classes instead of "red", "blue" it would be every thing I need.

To add class you can do like this.

newGs.append("circle")
          .attr("r", String(consts.nodeRadius))
          .attr("class", function(d){
            function(d){
            if(d)//some condition on data
            {
              return "red";//this will put class red in the node.

            } 
            else 
            return "blue";//this will put class blue in the node.

          });

Another way of doing the same:

  newGs.append("circle")
    .attr("r", String(consts.nodeRadius))
    .classed({
    'red': function(d) { return d.condition1 == "something"; },
    'blue': function(d) { return d.condition1 != "something"; }
  });

Hope this helps!

Upvotes: 1

Related Questions