如何在d3.js中将不同类型的元素绑定到数据？

Question

我试图在d3.js中输入一些数据，并让它创建不同类型的元素（路径，矩形，弧形等）。例如，我的数据可能像这样：

var mydata = [{i:0, type:'arc'}, {i:1, type:'rect'}, {i:2, type:'path'}]

我想将此数据绑定到某些元素，这样它将为每个元素创建一个g组（以便可以轻松地将其转换到不同位置），但是对于每个基准，还创建一个不同的元素基于其“类型”条目。

我知道如何将数据绑定为路径，例如：

my_svg.selectAll('g')
        .data(mydata)
        .enter()
        .append('g')
        .attr("stroke-width", 1)
        .append('path')
        .attr('d', line_fn);

但是我不知道如何“分叉”它，因此我不仅可以将路径作为路径，还可以对弧或矩形元素进行分箱。我该怎么办？