Appending different element types on enter

[Jamie Popkin]

I'm having loads of fun playing with the force layouts. I've got a quick question.

On entering an array and appending elements I was wondering if there is some way to add different types of elements depending on the output of a function... Or some other means.

For example... I've got this little mock-up and would like to make the blue circles be text instead.

It would be super handy to have something like this work:

node = vis.selectAll("circle.node")

      .data(json.nodes)

      .enter().append(function (e) {

                if (e.blah === "text") {

                    return ("svg:text");

                } else {

                    return ("svg:circle");

                }

        });

But I don't think that's possible.

Any ideas would be much appreciated. :)

Thanks

Jamie

--

Jamie Popkin
Little Earth

@jamiepopkin

http://littleearth.ca

[Mike Bostock]

Yeah, you can, using the `filter` operator. I'd probably start by
defining the nodes using a generic svg:g element:

node = vis.selectAll("g.node")
.data(json.nodes)
.enter().append("svg:g");

The nice thing about svg:g is that you can position all nodes
(regardless of how they are displayed) using the "transform"
attribute, translate(x,y). Then, use the filter operator to add
different contents:

node.filter(function(d) { return d.blah == "text"; }).append("svg:text")…
node.filter(function(d) { return d.blah != "text"; }).append("svg:circle")…

Mike

[Jamie Popkin]

Fantastic! Thanks Mike. :)

--

Jamie Popkin
Little Earth

@jamiepopkin

http://littleearth.ca

[Jamie Popkin]

Thanks Again Mike. That worked like a charm.

Here is the result displaying text nodes linked to circle nodes.

     http://littleearth.ca/d3/labels.html

Now I'm planning to tinker with how the links attach. I'm hoping to have the link target float to the best locating on the text <g>.

This has been a fun project :)

Jamie

[Oyindamola Oluwatimi]

This filtering function allows different rending options (i.e., text or circle). 

I am using d3.layout.tree() (collapsible tree) and I want to perform a binary conditional rendering of a parent node. That is, either render this node or not. Of course, if the parent node is not rendered and it also has children, then the children will not be rendered as well. 

Can I accomplish this with this filtering method?

Link to collapsible tree: http://bl.ocks.org/mbostock/4339083