title: d3.js and TypeScript compilation error
body: <p>I'm working through the example <a href="https://bl.ocks.org/mbostock/2675ff61ea5e063ede2b5d63c08020c7" rel="noreferrer">Force Dragging I</a> and have been able to get this to work with plain JavaScript. However, I have a compilation error when trying to use TypeScript.</p>
  
  <p>The problem code (with extraneous parts removed) is:</p>
  
  <pre class="lang-js prettyprint-override"><code>import * as d3 from "d3";
  
  interface INode {
      id: string;
      group: number;
  }
  
  interface ILink {
      source: string;
      target: string;
      value: number;
  }
  
  interface IGraph {
      nodes: INode[];
      links: ILink[];
  }
  
  var svg = d3.select("svg");
  
  d3.json("data/miserables.json", function (error, graph: IGraph) {
  
      var node = svg.append("g")
          .selectAll("circle")
          .data(graph.nodes) // Commenting this out, error goes away
          .enter().append("circle")
          .call(d3.drag() // Error here
              .on("start", dragstarted)
              .on("drag", dragged)
              .on("end", dragended));
  });
  </code></pre>
  
  <p>The <code>.call(d3.drag()</code> line is giving rise to the following tsc error:</p>
  
  <blockquote>
    <p>App.tsx(31,15): error TS2345: Argument of type 'DragBehavior' is not assignable to parameter of type
    '(selection: Selection, ...args: any[])
    => void'.
          Types of parameters 'selection' and 'selection' are incompatible.
            Type 'Selection' is not assignable to type 'Selection'.
              Type 'BaseType' is not assignable to type 'Element'.
                Type 'null' is not assignable to type 'Element'.</p>
  </blockquote>
  
  <p>Similar to <a href="https://stackoverflow.com/questions/43992586/d3-v4-drag-and-drop-with-typescript">d3 v4 drag and drop with TypeScript</a>, there is no error if I change the code to reselect the circles:</p>
  
  <pre><code>var nodes =
    svg.append("g")
    .selectAll("circle")
    .data(graph.nodes)
    .enter().append("circle");
  
  var circle = svg.selectAll("circle");
  circle.call(d3.drag()
    .on("start", dragstarted)
    .on("drag", dragged)
    .on("end", dragended));
  </code></pre>
  
  <p>However, when not using the types this is not necessary.</p>
  
  <p>I'm trying to work out how to work with TypeScript here in order to define variables with the appropriate types, or whatever is required to get it compiling.</p>