chromosome.ts 1.96 KB
Newer Older
Remi  PLANEL's avatar
Remi PLANEL committed
1
2
import { axisTop } from "d3-axis";
import { Selection, select } from "d3-selection";
Remi  PLANEL's avatar
Remi PLANEL committed
3
import { scaleLinear } from "d3-scale";
Remi  PLANEL's avatar
Remi PLANEL committed
4
import { format } from "d3-format";
5
6
import { GenericAxisData } from "../../types";

Remi  PLANEL's avatar
Remi PLANEL committed
7
8
9
10

export default function () {
  let xScale = scaleLinear()
    .domain([0, 0])
11
12
    .range([0, 0])

Remi  PLANEL's avatar
Remi PLANEL committed
13
  function genomeAxis(
Remi  PLANEL's avatar
Remi PLANEL committed
14
    _selection: Selection<SVGGElement, GenericAxisData, any, any>,
Remi  PLANEL's avatar
Remi PLANEL committed
15
16
17
18
    width: number,
    yPosition: number = 0
  ) {

19
    _selection.each(function (_data) {
Remi  PLANEL's avatar
Remi PLANEL committed
20
21
22
23
      const container = select(this)
        .attr("transform", "translate(0," + yPosition + ")");

      xScale = scaleLinear()
24
        .domain(_data.interval)
Remi  PLANEL's avatar
Remi PLANEL committed
25
26
27
28
29
30
        .range([0, width])

      const genomeAxisComponent = axisTop(xScale)
        .tickFormat(format(".3s"));

      const genomeAxisSelection = container
31
        .selectAll<SVGElement, GenericAxisData>("g.genome-axis")
Remi  PLANEL's avatar
Remi PLANEL committed
32
33
34
35
36
        .data([_data]);

      // ENTER
      const genomeAxisSelectionEnter = genomeAxisSelection
        .enter()
37
        .append<SVGElement>("g")
Remi  PLANEL's avatar
Remi PLANEL committed
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
        .classed("genome-axis", true);

      genomeAxisSelectionEnter
        .append("g")
        .classed("title", true)
        .append("text");

      genomeAxisSelectionEnter
        .append("g")
        .classed("axis-elems", true);


      // REMOVE 
      genomeAxisSelection.exit().remove();

      //UPDATE
      const genomeAxisSelectionUpdate = genomeAxisSelection
        .merge(genomeAxisSelectionEnter);

      genomeAxisSelectionUpdate
        .select<SVGTextElement>(".title > text")
        .style("fill", "black")
        .style("font-family", "monospace")
Remi  PLANEL's avatar
Remi PLANEL committed
61
62
63
64
        .attr(
          "transform",
          d => "translate(" + (width / 2 + d.title.length * 8 / 2) + ",20)"
        )
65
        .text(d => d.title);
Remi  PLANEL's avatar
Remi PLANEL committed
66
67


68
69
70
71
      genomeAxisSelectionUpdate
        .select<SVGSVGElement>("g.axis-elems")
        .attr("transform", "translate(0, 50)")
        .call(genomeAxisComponent);
Remi  PLANEL's avatar
Remi PLANEL committed
72
73
74
75
76
77
78
79
80
    });

  }
  genomeAxis.scale = function () {
    return xScale;
  }
  return genomeAxis;
}