Fix type erros: define selection types.

src/scripts/component/sequence/gene.ts

@@ -9,16 +9,17 @@ export interface GeneData {
 }
 
 export default function () {
-  function gene(_selection: Selection<SVGGElement, Array<GeneData>, SVGElement, any>, width: number = 1000, geneOffset: number = 5, geneHeight: number = 20) {
+  function gene(_selection: Selection<SVGGElement, Array<GeneData>, HTMLElement, any>, width: number = 1000, geneOffset: number = 5, geneHeight: number = 20) {
     _selection.each(function (_data: Array<GeneData>) {
       const sumGeneOffset = (_data.length - 1) * geneOffset;
       const sumLength = _data.reduce((accum, gene) => accum + gene.length, 0);
       const xScale = scaleLinear().domain([0, sumLength - sumGeneOffset]).range([0, width])
       const container = select(this);
-      const genes = container.selectAll('.gene').data(_data);
+      const genes = container.selectAll<SVGGElement, GeneData>('.gene').data(_data);
 
       // ENTER
       const enterGenes = genes.enter().append('g').classed("gene", true);
+
       enterGenes.append("path");
 
       // EXIT

src/scripts/index.ts

-import GeneComponent from "./component/sequence/gene";
+import GeneComponent, { GeneData } from "./component/sequence/gene";
 import { select, Selection } from "d3-selection";
 const genes = [
     { name: "gene 1", length: 1000, strand: 1 },
@@ -8,7 +8,7 @@ const genes = [
 const geneComponent = GeneComponent();
 
 
-const myGenes = select("g#genes");
+const myGenes = select<SVGGElement, Array<GeneData>>("g#genes");
 
 myGenes.datum(genes).call(geneComponent, 1000, 5, 10);