Accepted answer

You can do this, as shown in e.g. this example, by using a symbol generator and path elements instead of SVG elements for specific shapes. The code to add shapes becomes

var node = svg.selectAll(".node")
  .attr("class", "node")
  .attr("d", d3.svg.symbol()
    .type(function(d) { return d3.svg.symbolTypes[d.s]; }))
  .style("fill", function(d) { return color(; })

Then you also need to change your tick handler to change the transform attribute of the path elements:

node.attr("transform", function(d) {
    return "translate(" + d.x + "," + d.y + ")";

Complete jsfiddle here.

Related Query

More Query from same tag