Selections, Drill 4

Write the function selectCircles to return a d3 selection of all the circles that are children of the group-2 element.

<body>
  <div>
    <svg id="svg">
      <g id="group-1">
        <circle cx="100" cy="50" r="20" fill="red"></circle>
        <circle cx="130" cy="50" r="20" fill="green"></circle>
        <circle cx="160" cy="50" r="20" fill="blue"></circle>
      </g>
      <g id="group-2">
        <circle cx="100" cy="90" r="20" fill="cyan"></circle>
        <circle cx="130" cy="90" r="20" fill="magenta"></circle>
        <circle cx="160" cy="90" r="20" fill="yellow"></circle>
      </g>
    </svg>
  </div>
  <script>
    var sel = selectCircles(); // write this function
  </script>
</body>

Try it

Editor

5
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

SVG Output

Messages

DOM

<svg id="svg">
  <g id="group-1">
    <circle cx="100" cy="50" r="20" fill="red"></circle>
    <circle cx="130" cy="50" r="20" fill="green"></circle>
    <circle cx="160" cy="50" r="20" fill="blue"></circle>
  </g>
  <g id="group-2">
    <circle cx="100" cy="90" r="20" fill="cyan"></circle>
    <circle cx="130" cy="90" r="20" fill="magenta"></circle>
    <circle cx="160" cy="90" r="20" fill="yellow"></circle>
  </g>
</svg>