Change nodes to different shapes (circle, rectangle and oval)

928 views
Skip to first unread message

Stix Mabakane

unread,
Jun 25, 2015, 9:38:40 AM6/25/15
to d3...@googlegroups.com
Hello

Can you please help me. I have a tree visualization which draw circle nodes. The color of the node is determined by the array d[1] which is called d.time. For example, if the value of d.time is less than 5 then the circle will be white, if the value of d.time is between 6 & 11 then the color of the node will be orange, if the value of d.time is greater than 11 then the color of the circle node will be red.

Now, I want the script to further draw a circle node when then value of d.time is less than 5 and draw a rectangle when the value of d.time is between 6 & 11 and draw an oval (ellipse) when the value of d.time is greater than 11. Below is the paragraph that display the circle nodes with different colors:

var node = svg.selectAll("g.node")
      .data(nodes)
    .enter().append("g")
      .attr("class", "node")
      .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")";
 })

  node.append("circle")
      .attr("r", 4.5)
      .attr("fill", function(d) {
                        if (d.time <= 5) {
                                return "white";
                        } else if (d.time >= 6 && d.time <= 11) {
                                return "orange";
                        } else {
                                return "red";
                        }
                });

I changed the above red code to the following code in order to change the shapes (circle, rectangle or oval) depending on d.time but it doesn't work:

.attr("shape", function(d) {
                        if (d.time <= 5) {
                              node.append("circle")
                              .attr("r", 4.5);
                        } else if (d.time >= 6 && d.time <= 11) {
                              node.append("rect")
                                  .attr("width", 15)
                                  .attr("height", 15);
                        } else {
                                node.append("ellipse")
                                  .attr("rx", 5)
                                  .attr("ry", 5)
                        }
                });

Do we even have an attribute called shape? Full code is as follows: 

<!DOCTYPE html>
<meta charset="utf-8">
<style>

.node circle {
  stroke: steelblue;
  stroke-width: 2px;
}

.node {
  font: 10px sans-serif;
}

.link {
  fill: none;
  stroke: #ccc;
  stroke-width: 3px;
}

</style>
<body>
<script src="/Users/smabakane/Desktop/visualization/d3/d3.js"></script>
<script>

var width = 960,
    height = 2000;

var tree = d3.layout.tree()
 .size([height, width - 160]);

var diagonal = d3.svg.diagonal()
    .projection(function(d) { return [d.y, d.x]; });

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
  .append("g")
    .attr("transform", "translate(40,0)");

d3.json("/Users/smabakane/Desktop/visualization/tree/trees2processors/flare.json", function(error, json) {
  var nodes = tree.nodes(json),
      links = tree.links(nodes);

  var link = svg.selectAll("path.link")
      .data(links)
    .enter().append("path")
      .attr("class", "link")
      .attr("d", diagonal);

  var node = svg.selectAll("g.node")
      .data(nodes)
    .enter().append("g")
      .attr("class", "node")
      .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")";
 })
 .attr("shape", function(d) {
                        if (d.time <= 5) {
                              node.append("circle")
                              .attr("r", 4.5);
                        } else if (d.time >= 6 && d.time <= 11) {
                              node.append("rect")
                                  .attr("width", 15)
                                  .attr("height", 15);
                        } else {
                                node.append("ellipse")
                                  .attr("rx", 5)
                                  .attr("ry", 5)
                        }
                });

node.append("text")
      .attr("dx", function(d) { return d.children ? -8 : 8; })
      .attr("dy", 3)
      .attr("text-anchor", function(d) { return d.children ? "end" : "start"; })
      .text(function(d) { return d.name + " , " + d.time; });
});

d3.select(self.frameElement).style("height", height + "px");

</script>
</body>
</html>

I will really appreciate your help. Thanks

Sticks

nguyen dang Thanh

unread,
Jun 25, 2015, 9:57:27 PM6/25/15
to d3...@googlegroups.com
Hi, I got the same issue. Does your code works properly?

I fix by adding all possible type as below

node.append("circle")
   .attr("r", function(d){
      if(check if not a circle)
         return 0;
      return d.width;//or return 4.5
   })
node.append("rectangle")
   .attr("width", function(d){
      if(check if not a rectangle)
         return 0;
      return d.r;//or return 15
   })
   .attr("height", function(d){
      if(check if not a rectangle)
         return 0;
      return d.r;//or return 15
   })

It works for me. But i think this is not a good solution. I'm looking for a better one, more dynamically. 
You can see my topic here

Sticks Mabakane

unread,
Jun 29, 2015, 7:04:08 AM6/29/15
to d3...@googlegroups.com
Thanks. It also works for me. I think the best is for d3 to have an attribute called: shape.

--
You received this message because you are subscribed to the Google Groups "d3-js" group.
To unsubscribe from this group and stop receiving emails from it, send an email to d3-js+un...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Reply all
Reply to author
Forward
0 new messages