Using SVG Filter Gaussian blur with single page app (Ember)

I'm trying to use d3 to apply a Gaussian blur to an svg circle while on a non-home page of my SPA with Ember.

First I tried using the d3 code

didInsertElement: function() {
    var svg = d3.select('#svg');
    var filter = svg
    .append("filter")
      .attr("id", "blur")
    .append("feGaussianBlur")
      .attr('in', 'SourceAlpha')
      .attr("stdDeviation", 3)
      .attr('result', 'blur');

    svg.append('circle')
         .attr('cx', 50)
         .attr('cy', 50)
         .attr('r', 20)
         .style({'fill': 'blue'})
         .attr('class', 'cursor')
         .attr('filter', 'url(#blur)');
}

but that didn't work. I then tried the example from the mozilla docs,

<svg width="230" height="120"
 xmlns="http://ift.tt/nvqhV5"
 xmlns:xlink="http://ift.tt/PGV9lw">

  <filter id="blurMe">
    <feGaussianBlur in="SourceGraphic" stdDeviation="5" />
  </filter>

  <circle cx="60"  cy="60" r="50" fill="green" />

  <circle cx="170" cy="60" r="50" fill="green"
          filter="url(#blurMe)" />
</svg>

Inserted directly into the handlebars template. That didn't work either. Note this has all been on the BridgeBuilderView page.

Then I redid all of that on the index.hbs page that is loaded first when the application starts. When I do that the gaussian blurs work in both cases. I was wondering if anyone has some insight into why this is the case, and how I can get it to work on my non-root page.

Thanks