add different shapes to d3 force layout

Question

I'm trying to add different shapes to my d3 force layout but unsucessfully. The end goal is determine the shape based on properties of the node object itself. I'm using selection.enter() to then .append() the shapes like so. As the force directed layout only takes one array of nodes, and .append() takes a string and not a function

node = vis.selectAll('.node')
    .data(nodes, function(d) {
        return d.filename
    });

then...

node.enter()
    .append(**'rect'**) //I need to vary this based on node properties
    .attr('class', function(d) { 
        return 'node ' + d.entityType;
        //return d.entityType;
    });

I am unsure of the best way to accomplish this. Thanks in advance for any help.

Answer 1

I think it would be easier to insert svg paths rather than rects or circles. It's pretty flexible and you'll be able to add just about any shape you can think of to the force graph.

The following code draws a star. http://jsfiddle.net/UkeMS/

<svg>
    <path  d="
        m 100 100
        l 23 12
        l -4 -26
        l 19 -19
        l -27 -4
        l -11 -23
        l -12 23
        l -27 4
        l 19 19
        l -4 26
        l 24 -12
    "/>
</svg>

Just remember to declare the paths using relative coordinates with lowercase letters (as above) as opposed to absolute coordinates using uppercase letters.