Why is the d3 element not appending when the list item is rendered?
<p>I have a list of items that expands for each when in focus.  </p>

<pre><code>{{#if inFocus}}    
    {{&gt;d3Hello}} 
{{/if}}
</code></pre>

<p>Yet the span element does not append when it is in focus: </p>

<pre><code>Template.d3Hello.onRendered(function(){
    d3.select("#plot").append("span")
        .text("Hello, world!");
    console.log(Date.now()) //This does log everytime the list item is clicked and d3 is inFocus.  But the span is not appended.   

})
</code></pre>

<p>Plot is an id within this template: </p>

<pre><code>&lt;template name="d3Hello"&gt;
    &lt;svg id="plot"&gt;PLOT&lt;/svg&gt; 
&lt;/template&gt;
</code></pre>

<p>Why could this be?</p>

<p>The weirdest part is that when I run<code>$('#plot').html()</code> in the console I see this, but if I use the inspector I don't see anything, but the svg itself. </p>

<pre><code>"PLOT&lt;span&gt;Hello, world!&lt;/span&gt;&lt;span&gt;Hello, world!&lt;/span&gt;"
</code></pre>