title: d3js angular directive: svg elements render incorrectly when applying filters via url
body: <p><strong>I am building a directive that wraps a custom d3 chart.</strong></p>
  
  <p>I am pretty new to d3 and still wrapping my head around it. </p>
  
  <h2>Context:</h2>
  
  <p>the directive is instantiated like so:</p>
  
  <pre><code>&lt;d3-bookings2 data="events" stacked="true"&gt;&lt;/d3-bookings2&gt;
  </code></pre>
  
  <p>with a <code>data</code> and <code>stacked</code> variable passed through the directive scope.
  the directive draws a series of rectangles on a timeline. either in a single row
  or stacked. the data is an array of date ranges for the non stacked version. and an array of labels, with an array of date ranges for the stacked version (aka nested data).</p>
  
  <h2>problem</h2>
  
  <p>I am applying a drop shadow via a filter to these rectangles in the update section of my draw method. The last line <code>.style("filter", "url(#drop-shadow)")</code> seems to be the culprit. I came to this conclusion since commenting it out results in normal behaviour. </p>
  
  <p>What this line seems to be causing is for the <code>&lt;rect&gt;</code> elements to not be visible (the elements are still in the DOM, confirmed via developer tools). if I click the back/forward button to navigate to a second page with a separate controller that also has an instance of the directive. This continues to be the norm until i click the refresh button in the browser.</p>
  
  <pre><code>var slot = svg.selectAll('rect');
  slot
      .attr("width", function (d, i) {
          return (xScale(d.end) - xScale(d.start));
      })
      .attr("height", scaledItemHeight)
      .attr("x", function (d, i) {
          return getXPos(d);
      })
      .attr("y", function (d, i) {
          if (scope.stacked) {
              return getStackPosition(yAxisMapping[d.venueName]);
          } else {
              return getStackPosition(0);
          }
      })
      .style("fill", function (d, i) {
          return colours[d.state];
      })
      .style("filter", "url(#drop-shadow)")
      ;
  </code></pre>
  
  <p>Any advice would be much appreciated!</p>