Adding multiple shapes in d3 - svg

Question

I would like to add different shapes depending on one of the properties in my json file. I found this approach by Mike:
https://groups.google.com/forum/#!topic/d3-js/4EJDu1xOh8Y
The idea is great, I'm just not sure how to adapt it. I either want to add a circle or an svg:use element (with attr("xlink:href")). They both have (of course) different attributes. So how do I do that? What do I append? In the example, the attr("d") was also used, do I need that also?
That's what I have so far but I'm not sure what to add where.
I really appreciate your help!
var type = d3.scale.ordinal()
.domain(["Q", "C"])
.range("circle","svg:use");
for(l=0;l<4;l++){
currentsvg.selectAll("path")
.data(queryArray[l])
.enter()
.append("svg:path")
.type(function(d,i) {
if (queryArray[l][i].name.substr(0,1) == "Q"){
return type("Q");
}
else if (queryArray[l][i].name.substr(0,1) == "C"){
return type("C");
}
});
}

Answer 1

Below is a different solution without filtering that uses the path to draw the shapes. It doesn't use the "rect" or "circle" of svg but rather just uses the path to draw the shapes. Check out here for more on paths. Note that the circle is two connecting arcs. It also classes each shape based on the data so you can have different colors, etc using CSS. Here is a fiddle.
currentsvg.selectAll("path")
.data(data)
.enter()
.append("path")
.attr("d",function(d,i){
var path,
s = i*50,
r = 10,
w = r*2;
if (data[i] == "Q"){
path = "M" + s + " " + s + " L" + s + " " + (s+w) +
" L" + (s+w) + " " + (s+w) + " L" + (s+w) + " " + s + "Z"
}
else if (data[i] == "C"){
path = "M" + s + " " + s + " m" + -r + ", 0 " +
" a " + r + "," + r + " 0 1,0 " + r*2 + ",0" +
" a " + r + "," + r + " 0 1,0 "+ -r*2 + ",0"
}
return path;
})
.attr("class", function(d){return d == "Q" ? "rec" : "circ";})

Answer 2

The best way to do that is to filter the data how you want into separate data sets for each shape before you create shapes. Then you can create the shapes with that new data set.
var data = ["Q","Q","Q","C","C","Q","Q","C","Q","C"];
var circleSet = data.filter(function(d){return d === "Q";}),
squareSet = data.filter(function(d){return d === "C";});
As Lars said, that is also not how the d attribute works. Here is a working JSFiddle of the whole thing.