d3:对象的子数组

我有以下结构:

[
    { 'length': 10, attributes: [1,2,3] },
    { 'length': 7, attributes: [1,3,4,5] },
    { 'length': 12, attributes: [3,5,7,9,10] },
]

 and I am doing the following:


x = d3.scale.linear().domain([0, maxHeight]).range([50, w]),
y = d3.scale.linear().domain([0, maxHeight]).range([h, 20]);
z = d3.scale.linear().domain([0, maxHeight]).range([0, h - 20]);

var chart = svg.selectAll("g.chart")
    .data(items)
    .enter()
    .append("svg:g")
    .attr("class", "chart");

chart.append("svg:rect")
    .attr("fill", 'darkblue')
    .attr("class", 'data')
    .attr("x", function(d, i) { return x(i+1); })
    .attr("y", function(d, i) { return bottom - z(d['length']) + 15 })
    .attr("width", 4)
    .attr("height", function(d, i)  { return z(d['length']) - z(d['min']); })

我想要做的是在每个矩形上添加圆圈,这些圆圈对应于我的结构中的属性.基本上,(对于一个'item'},我应该看到这样的事情:

我唯一能想到的是循环遍历属性并逐个元素地添加它们:

for (z=0; z< 3; ++z)
{
    chart.append("svg:circle")
    .data(items[z]['attributes'])
    .style("fill", 'yellow')
    .style("stroke", "gray")
    .attr("cx", function(d, i) { return x(i+1); })
    .attr("cy", function(d, i) 
    { 
        console.log(d); 
        return bottom - 15;
    })
    .attr("r", 5);
}

有一个更好的方法吗？