svg - D3: 外部 SVG を選択して変更しますか?

Question

Adobe Illustrator で作成された埋め込み (外部) SVG の要素を選択して変更することはできますか?

html:

<object data="circles.svg" type="image/svg+xml" id="circles"></object>

サークル.svg:

<svg xmlns="http://www.w3.org/2000/svg" width="100px" height="100px" >
  <circle id="c_red" fill="#A00" stroke="#000" cx="40" cy="40" r="40"/>
  <circle id="c_grn" fill="#0A0" stroke="#000" cx="60" cy="60" r="40"/>
</svg>

d3 コード:

<script>
  var my_circles = d3.select("#circles svg").selectAll("circles");
  my_circles.attr("fill", "black");
</script>

それ以外の場合は、これを行う他の方法を受け入れます。たとえば、次のようなものを選択するとうまくいく可能性があります (実際に SVG を見つけます)。

var svg = document.getElementById('circles');

しかし、D3 でどのように解析して変更するのでしょうか? おまけの質問: D3 セレクターをデバッグする最良の方法は?