title: Type 'SVGPathSeg' is not assignable to type 'EnterElement'. Property 'ownerDocument' is missing in type 'SVGPathSeg'
body: <p>I'm trying to reproduce this <a href="https://bl.ocks.org/mbostock/4063550" rel="nofollow noreferrer">example</a> using <a href="https://github.com/tomwanzek/d3-ng2-service" rel="nofollow noreferrer">d3-ng2-service</a> service on Angular 5.</p>
  
  <p>Component:</p>
  
  <p>ngOnInit code:</p>
  
  <pre><code>let d3 = this.d3;
  let d3ParentElement: Selection&lt;HTMLElement, any, null, undefined&gt;;
  let d3Svg: Selection&lt;SVGSVGElement, any, null, undefined&gt;;
  let d3G: Selection&lt;SVGGElement, any, null, undefined&gt;;
  let width: number;
  let height: number;
  
  if (this.parentNativeElement !== null) {
  
      d3ParentElement = d3.select(this.parentNativeElement);
      d3Svg = this.d3Svg = d3ParentElement.select&lt;SVGSVGElement&gt;('svg');
  
      width = +d3Svg.attr('width');
      height = +d3Svg.attr('height');
  
      d3G = d3Svg.append&lt;SVGGElement&gt;("g")
          .attr("transform", "translate(" + (width / 2 + 40) + "," + (height / 2 + 90) + ")");
  
      let stratify = d3.stratify()
          .parentId(function (d) {
              return d["id"].substring(0, d["id"].lastIndexOf("."));
          });
  
      let tree = d3.tree()
          .size([2 * Math.PI, 500])
          .separation(function (a, b) {
              return (a["parent"] == b["parent"] ? 1 : 2) / a["depth"];
          });
  
      //let data = this.gruppi;
      let data = [
          {id: "flare"},
          {id: "flare.analytics"},
          {id: "flare.analytics.cluster"},
          {id: "flare.analytics.cluster.AgglomerativeCluster"},
          {id: "flare.analytics.cluster.CommunityStructure"},
          {id: "flare.analytics.cluster.HierarchicalCluster"},
          {id: "flare.analytics.cluster.MergeEdge"},
          {id: "flare.analytics.graph"},
          {id: "flare.analytics.graph.BetweennessCentrality"},
          {id: "flare.analytics.graph.LinkDistance"},
          {id: "flare.analytics.graph.MaxFlowMinCut"},
          {id: "flare.analytics.graph.ShortestPaths"},
          {id: "flare.analytics.graph.SpanningTree"},
          {id: "flare.analytics.optimization"},
          {id: "flare.analytics.optimization.AspectRatioBanker"},
          {id: "flare.animate"},
          {id: "flare.animate.Easing"},
          {id: "flare.animate.FunctionSequence"},
          {id: "flare.animate.interpolate"},
          {id: "flare.animate.interpolate.ArrayInterpolator"},
          {id: "flare.animate.interpolate.ColorInterpolator"},
          {id: "flare.animate.interpolate.DateInterpolator"},
          {id: "flare.animate.interpolate.Interpolator"},
          {id: "flare.animate.interpolate.MatrixInterpolator"},
          {id: "flare.animate.interpolate.NumberInterpolator"},
          {id: "flare.animate.interpolate.ObjectInterpolator"},
          {id: "flare.animate.interpolate.PointInterpolator"},
          {id: "flare.animate.interpolate.RectangleInterpolator"},
          {id: "flare.animate.ISchedulable"},
          {id: "flare.animate.Parallel"},
          {id: "flare.animate.Pause"},
          {id: "flare.animate.Scheduler"},
          {id: "flare.animate.Sequence"},
          {id: "flare.animate.Transition"},
          {id: "flare.animate.Transitioner"},
          {id: "flare.animate.TransitionEvent"},
          {id: "flare.animate.Tween"},
          {id: "flare.data"},
          {id: "flare.data.converters"},
          {id: "flare.data.converters.Converters"},
          {id: "flare.data.converters.DelimitedTextConverter"},
          {id: "flare.data.converters.GraphMLConverter"},
          {id: "flare.data.converters.IDataConverter"},
          {id: "flare.data.converters.JSONConverter"},
          {id: "flare.data.DataField"},
          {id: "flare.data.DataSchema"},
          {id: "flare.data.DataSet"},
          {id: "flare.data.DataSource"},
          {id: "flare.data.DataTable"},
          {id: "flare.data.DataUtil"},
          {id: "flare.display"},
          {id: "flare.display.DirtySprite"},
          {id: "flare.display.LineSprite"},
          {id: "flare.display.RectSprite"},
          {id: "flare.display.TextSprite"},
          {id: "flare.flex"},
          {id: "flare.flex.FlareVis"},
          {id: "flare.physics"},
          {id: "flare.physics.DragForce"},
          {id: "flare.physics.GravityForce"},
          {id: "flare.physics.IForce"},
          {id: "flare.physics.NBodyForce"},
          {id: "flare.physics.Particle"},
          {id: "flare.physics.Simulation"},
          {id: "flare.physics.Spring"},
          {id: "flare.physics.SpringForce"},
          {id: "flare.query"},
          {id: "flare.query.AggregateExpression"},
          {id: "flare.query.And"},
          {id: "flare.query.Arithmetic"},
          {id: "flare.query.Average"},
          {id: "flare.query.BinaryExpression"},
          {id: "flare.query.Comparison"},
          {id: "flare.query.CompositeExpression"},
          {id: "flare.query.Count"},
          {id: "flare.query.DateUtil"},
          {id: "flare.query.Distinct"},
          {id: "flare.query.Expression"},
          {id: "flare.query.ExpressionIterator"},
          {id: "flare.query.Fn"},
          {id: "flare.query.If"},
          {id: "flare.query.IsA"}
      ];
  
      let root = tree(stratify(data));
  
      let radial = d3.linkRadial()
          .angle(function(d){ return d["x"];})
          .radius(function(d){ return d["y"];});
  
      let link = d3G.selectAll&lt;SVGElement, any&gt;(".link")
          .data(root.links())
          .enter()
          .append&lt;SVGPathSeg&gt;("path")
          .attr("class", "link")
          .attr("d",radial);
  
      let radialPoint = function(x, y) {
          return [(y = +y) * Math.cos(x -= Math.PI / 2), y * Math.sin(x)];
      };
  
      let node = d3G.selectAll&lt;SVGElement, any&gt;(".node")
          .data(root.descendants())
          .enter()
          .append&lt;SVGGElement&gt;("g")
          .attr("class", function (d) {
              return "node" + (d["children"] ? " node--internal" : " node--leaf");
          })
          .attr("transform", function (d) {
              return "translate(" + radialPoint(d["x"], d["y"]) + ")";
          });
  
      node.append&lt;SVGCircleElement&gt;("circle")
          .attr("r", 2.5);
  
      node.append&lt;SVGTextElement&gt;("text")
          .attr("dy", "0.31em")
          .attr("x", function (d) {
              return d["x"] &lt; Math.PI === !d["children"] ? 6 : -6;
          })
          .attr("text-anchor", function (d) {
              return d["x"] &lt; Math.PI === !d["children"] ? "start" : "end";
          })
          .attr("transform", function (d) {
              return "rotate(" + (d["x"] &lt; Math.PI ? d["x"] - Math.PI / 2 : d["x"] + Math.PI / 2) * 180 / Math.PI + ")";
          })
          .text(function (d) {
              return d["id"].substring(d["id"].lastIndexOf(".") + 1);
          });
      // Do more D3 things
  }
  </code></pre>
  
  <p>This works and i get a pretty decent result:
  <a href="https://ibb.co/g3uNh7" rel="nofollow noreferrer">Angular component output</a></p>
  
  <p>But i keep getting an error output by angular telling:</p>
  
  <pre><code>ERROR in src/app/grafo/grafo.component.ts(262,25): error TS2344: Type 'SVGPathSeg' does not satisfy the constraint 'BaseType'.
    Type 'SVGPathSeg' is not assignable to type 'EnterElement'.
      Property 'ownerDocument' is missing in type 'SVGPathSeg'.
  </code></pre>
  
  <p><a href="https://ibb.co/ix6Dpn" rel="nofollow noreferrer">PhpStorm hint</a></p>
  
  <p>That refer to this part of code:</p>
  
  <pre><code>let link = d3G.selectAll&lt;SVGElement, any&gt;(".link")
                  .data(root.links())
                  .enter()
                  .append&lt;SVGPathSeg&gt;("path")
                  .attr("class", "link")
                  .attr("d",radial);
  </code></pre>
  
  <p>I'm struggling to find a fix for that and really don't know if is a framework issue or an error of mine somewhere. </p>
  
  <p>As suggested by tomwanzek on this <a href="https://github.com/tomwanzek/d3-ng2-service/issues/114#issuecomment-377596157" rel="nofollow noreferrer">issue</a> i've tried to replace <code>SVGPathSeg</code> with <code>SVGPathElement</code> but this will trigger an error two lines below at <code>.attr("d",radial)</code>:</p>
  
  <pre><code>let link = d3G.selectAll&lt;SVGElement, any&gt;(".link")
                  .data(root.links())
                  .enter()
                  .append&lt;SVGPathSeg&gt;("path")
                  .attr("class", "link")
                  .attr("d",radial);
  </code></pre>
  
  <p>I was using <code>SVGPathSeg</code> before because it accepted the <code>.attr("d", radial)</code>.</p>
  
  <p><a href="https://ibb.co/g5CN0S" rel="nofollow noreferrer">https://ibb.co/g5CN0S</a></p>
  
  <pre><code>TS2345: Argument of type 'LinkRadial&lt;any, DefaultLinkObject, [number,number]&gt;' is not assignable to parameter of type 'ValueFn&lt;SVGPathElement, HierarchyPointLink&lt;{}&gt;, string | number | boolean&gt;'.
  </code></pre>
  
  <p>I've missed some type somewhere else?</p>