title: Adding an image within a circle object in d3 javascript?
body: <p>My goal is to add an image into an existing circle with d3.  The circle will render and is interactive with mouseover method, but only when I use <code>&quot;fill&quot;</code>, <code>&quot;color&quot;</code>, and not something more sophisticated like <code>.append(&quot;image&quot;)</code>.</p>
  <pre><code>g.append(&quot;circle&quot;)
      .attr(&quot;class&quot;, &quot;logo&quot;)
      .attr(&quot;cx&quot;, 700)
      .attr(&quot;cy&quot;, 300)
      .attr(&quot;r&quot;, 10)
      .attr(&quot;fill&quot;, &quot;black&quot;)       // this code works OK
      .attr(&quot;stroke&quot;, &quot;white&quot;)     // displays small black dot
      .attr(&quot;stroke-width&quot;, 0.25)
      .on(&quot;mouseover&quot;, function(){ // when I use .style(&quot;fill&quot;, &quot;red&quot;) here, it works 
          d3.select(this)        
              .append(&quot;svg:image&quot;)
              .attr(&quot;xlink:href&quot;, &quot;/assets/images/logo.jpeg&quot;)
              .attr(&quot;cx&quot;, 700)
              .attr(&quot;cy&quot;, 300)
              .attr(&quot;height&quot;, 10)
              .attr(&quot;width&quot;, 10);
       });
  </code></pre>
  <p>The image doesn't show after I mouse over.  Using Ruby on Rails app, where my image &quot;logo.jpeg&quot; is stored in the <code>assets/images/ directory</code>.  Any help for getting my logo to show within the circle?  Thanks.</p>