d3.js - 选择svg上的所有矩形

Question

我有以下内容：

    <svg id="svggraph">
        <g transform="translate(50,10)">
<text fill="brown" font-size="30px" font-family="sans-serif" height="20" width="25" y="30" x="0" style="text-decoration:underline">A</text>
    <text fill="brown" font-size="30px" font-family="sans-serif" height="20" width="25" y="30" x="22" style="text-decoration:underline">B</text>
<text fill="brown" font-size="30px" font-family="sans-serif" height="20" width="25" y="30" x="44" style="text-decoration:underline">C</text>
<text fill="brown" font-size="30px" font-family="sans-serif" height="20" width="25" y="30" x="66" style="text-decoration:underline">D</text>
    <rect style="stroke: black;" height="25" width="20" y="40" x="0" id="checkins1"></rect><rect style="stroke: black;" height="25" width="20" y="40" x="22" id="builds2"></rect>
    <rect style="stroke: black;" height="25" width="20" y="40" x="44" id="oss3">
    </rect><rect style="stroke: black;" height="25" width="20" y="40" x="66" id="appsec4"></rect><rect 
    </svg>

我想从这个svg中获取所有矩形。我正在尝试以下方法：

var svgdata = d3.select("#svggraph");
 var svgrectdata = svgdata.selectAll("rect");

但是我没有得到rect数据。我需要获取所有矩形，以便我可以循环通过矩形并基于ids我可以更改颜色。