title: D3 Typescript SVG append not working
body: <p>I've been able to get numerous different objects to populate correctly on the DOM using D3 and Angular.
  Angular 4.4.6
  D3 4.13.0
  types/d3 4.12.0
  My problem is the SVG will populate correctly the first time but will not update either through a button or through interval duration. I've tried running this outside of angular using NgZone and that did not work either. I have attached my code same running in Stackblitz and have also linked the "working" copy that is in JavaScript.  Here is the link in Stackblitz <a href="https://stackblitz.com/edit/angular-df5mk8" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-df5mk8</a></p>
  
  <pre><code>update() {
  
      this.cdr.detectChanges();
  
      var svg = d3.select(this.root.nativeElement)
          .append('svg')
          .attr('height', 600)
          .attr('width', 600)
          .style('background-color', 'orange');
  
      var a = [1, 2, 3, 4, 5];
      var rects = svg.selectAll("rect").data(a);
  
      rects.enter().append("rect")
          .attr("x", function (d, i) { return i * 20; })
          .attr("width", "15px")
          .attr("height", function (d) { return d * 5; })
          .attr("data-currentVal", function (d) { return d });
  
  
  
      var updateData = function (newData: any) {
          rects.data(newData).transition().duration(2000)
              .attr("height", function (d: any) { return d * 5; })
              .attr("data-currentVal", function (d: any) { return d })
              .style("fill", function (d) {
                  if (d3.select(this).attr("data-currentVal") != d) {
                      return "red";
                  }
                  else { return "black"; }
              });
          console.log("updateData" + 1);
      }
  
  
      a[1] = 10;
      a[4] = 50;
      var enough = false;
      var repeatFunction = window.setInterval(function () {
          //console.log("repeat");
          updateData(a);
  
          a[3] = 20;
          a[1] = 15;
  
          if (enough) { window.clearInterval(repeatFunction); }
          else { enough = true; }
  
      }, 3000);
  }; 
  </code></pre>