Different node symbols for d3.js force-directed graph

Question

How do I display nodes as different symbols in d3.js's force-directed library? I wanted to implement something similar to what I wrote below:

  var node = svg.selectAll(".node") 
      .data(graph.nodes) 
    .enter().append(function(d){return d.shape;}) 
      .attr("class", "node") 
      .attr("r", 5) 
      .style("fill", function(d) { return color(d.group); }) 
      .call(force.drag); 

Each node would have an encoded shape ("rect", "circle", etc.). However, I get the error:

Uncaught TypeError: Object function (d){return "circle";} has no method 'indexOf' 

The other question I have related to that is this: how would I toggle between applying different attributes for each shape? Circles need an "r" attribute refined, but rects require "height" and "width". Thanks!

Answer 1

Use d3.svg.symbol, as in the force-directed symbols example.