CODEWITHSUNDEEP
javascriptd3.jssvg
Jared
Jared

Reputation: 21

D3 SVG Tree Graph with different symbols for nodes

So, I want to render different symbols for node points on a tree graph. Which isn't too bad, I have the following code that can do that:

nodeEnter.append("path")
.attr("d", d3.svg.symbol()
.type(function(d) { if
(d.type == "cross") { return "cross"; } else if
(d.type == "rectangle") { return "rect";}
etc...
}));

The issue I have is, if you use append with a specific shape, for example append("circle"), you can specify the width, height, etc. With d3.svg.symbol, you can only specify the size. How can I dynamically use something like this:

nodeEnter.append("rect")
.attr("width", rectW)
.attr("height", rectH)
.attr("stroke", "black")
.attr("stroke-width", 1)
.style("fill", function (d) {
return d._children ? "lightsteelblue" : "#fff";
});

But also do it with dynamic shapes based on the node type attribute?

I tried something like:

nodeEnter.append(function(d){if
(d.type == "rectangle") { return "rect"; }});

However, this throws an error of:

TypeError: Argument 1 of Node.appendChild is not an object.

Most of the examples I have found while searching this don't bother trying to modify the symbol as long as they are all unique. Again, I want to be able to do something more complex.

Upvotes: 0

Views: 491

Answers (1)

Jared
Jared

Reputation: 21

Did not get any responses for this, but I was able to work something out. The answer is to use a raw input for the 'd' attribute and skip d3.svg.symbol altogether:

nodeEnter.append("path")
  .attr("d", function(d) { if
    (d.type == "circle") { return "M-40,0a40,40 0 1,0 80,0a40,40 0 1,0 -80,0";}
  });

The caveat is, you need to draw your shapes manually with path.

Upvotes: 1

Related Questions