title: Using d3 to append colored circles based on data
body: <p>I have an SVG structure like the following:</p>
  
  <pre><code>&lt;g class="labels"&gt;&lt;/g&gt;
  </code></pre>
  
  <p>And some d3 code:</p>
  
  <pre><code>// svg is d3 context
  var labels = svg.select('.labels');
  
  ca = labels.append('g');
  
  function resize() {
      ca
          .call(colorAxis) // an instance of d3.svg.axis() using same data as below
          .selectAll('text')
              .remove();
  
      ca
          .selectAll('.tick').select('circle')
              .data(data)
          .enter().append('circle')
              .style('fill', function (datum) {
                  return '#' + datum.hex;
              })
              .attr('r', '7.5');
  }
  </code></pre>
  
  <p>And the structure ends up looking something like this:</p>
  
  <pre><code>&lt;g class="labels"&gt;
      &lt;!-- from ca.call(colorAxis) --&gt;
      &lt;g&gt;
          &lt;g class="tick" transform="translate(0,14.285714285714285)" style="opacity: 1;"&gt;
              &lt;line x2="-6" y2="0"&gt;&lt;/line&gt;
          &lt;/g&gt;
          &lt;!-- more of these... --&gt;
      &lt;/g&gt;
      &lt;circle r="7.5" style="fill: rgb(44, 149, 210);"&gt;&lt;/circle&gt;
      &lt;!-- as many of these as there are ticks --&gt;
  &lt;/g&gt;
  </code></pre>
  
  <p>And every time it calls resize, it adds even more circles (which is not what I want). What I want is a structure like this:</p>
  
  <pre><code>&lt;g class="labels"&gt;
      &lt;!-- from ca.call(colorAxis) --&gt;
      &lt;g&gt;
          &lt;g class="tick" transform="translate(0,14.285714285714285)" style="opacity: 1;"&gt;
              &lt;line x2="-6" y2="0"&gt;&lt;/line&gt;
              &lt;circle r="7.5" style="fill: rgb(44, 149, 210);"&gt;&lt;/circle&gt;
          &lt;/g&gt;
          &lt;!-- more of these... --&gt;
      &lt;/g&gt;
  &lt;/g&gt;
  </code></pre>
  
  <p>How do I fix my d3 code to achieve this? I've also tried changing <code>ca.selectAll('.tick').select('circle')</code> to <code>ca.selectAll('.tick')</code> and that caused the circles not to be appended at all.</p>
  
  <p><strong>EDIT</strong> I thought this was implied but apparently not. The <code>resize()</code> function is called when the DOM is resized and the axis must be adjusted accordingly to fit the content within the space allotted. The data itself is not dynamic.</p>