4.tabulator로 탭 구분자를 표시하는 파일

테이블 높이 설정

Height 설정 및 Virtual DOM 활용

테이블 높이를 지정하려면 변경3. 탭 구분자 파일을 tabulator로 표시
그 전에 테이블러를 사용하여 표를 표시할 때 전체 표의 높이를 지정하지 않았습니다
이 경우 테이블의 높이(세로 크기)는 데이터의 행 수에 따라 달라지며, 빅데이터를 읽을 때 큰 크기의 테이블을 브라우저에 표시하고 전체 브라우저가 스크롤하여 표시하는 행을 변경합니다.
여기에 Height 매개 변수로 표의 높이를 명확하게 지정합니다
Tabulator의 설정 부분을 다시 쓰기 위해 변경

        //　tabulatorの設定
        $("#gene-table").tabulator({
            groupBy: "Symbol",
            height: "200px",
            columns: gene_columns
        });

(화면 이미지 관계로 사이즈 200px로 조금 작음)
화면 이미지에서는 이해하기 어렵지만, 표의 표시 사이즈는 Height가 지정한 사이즈입니다

높이를 명시적으로 지정하면 Tabulator의 Virtual DOM을 활용할 수 있습니다.
표시할 수 있는 영역(및 그 전후)만 출력하는 DOM 처리를 통해 필요 없는 줄을 쓰지 않음
수백 줄의 데이터를 출력하는 것은 큰 문제가 되지 않지만, 수만 줄에 이르면 브라우저의DOM의 생성과 묘사가 과도한 부하가 될 수 있다
수만 줄의 데이터를javascript의 데이터 구조로 저장하는 것은 비교적 쉽지만, 이 데이터를 모두DOM 요소로 출력하는 것은 매우 어렵다.
0. 탭 구분자를 tabulator로 표시하는 파일에서 JSON의 데이터 집합을 제작할 때 처음 100줄의 데이터를 제한하는 이유는 표에 표시된 부하를 고려하기 때문이다
Height 매개 변수를 지정하여 줄 수를 제한하기 때문에, 여기는 LRG입니다RefSeqGene의 모든 데이터를 JSON으로 변환
create_json.py를 다음 내용으로 변경
create_json.py

#!/usr/bin/env python
# -*- coding: utf-8 -*-
from __future__ import print_function
import json
import csv
import argparse

__author__ = 'percipere'
__date__ = '2017/12/13'
__date_of_last_modification__ = '2017/12/25'


# Read data file and create JSON object
def convert_csv_to_json(filename='./LRG_RefSeqGene', delimiter='\t', maximum_lines=100, out_file="./output.json"):
    """
    Read csv file and convert it to json file.
    The first line of the csv should be delimiter separated column names.
    :param filename: file name of the CSV
    :param delimiter:
    :param maximum_lines: 0 means all lines
    """
    data_list = []
    with open(filename, 'r') as file_handle:
        reader = csv.DictReader(file_handle, delimiter=delimiter)
        reader.fieldnames[0] = reader.fieldnames[0][1:] if reader.fieldnames[0].startswith('#') else reader.fieldnames[
            0]
        for row_id, row in enumerate(reader, start=1):
            row.update({"id": row_id})
            data_list.append(row)
            if maximum_lines and row_id >= maximum_lines:
                break
    with open(out_file, 'w') as write_handle:
        json.dump(data_list, write_handle)


if __name__ == "__main__":
    parser = argparse.ArgumentParser(description="LRG_RefSeqGene to JSON file converter. output: output.json")
    parser.add_argument('--rows', dest='maximum_lines', required=False, type=int, default=0,
                        help="Number of rows to convert.")
    args = parser.parse_args()
    convert_csv_to_json(maximum_lines=args.maximum_lines)

실행

$ python3 ./create_json.py 

브라우저 캐시 지우기

새로 만든 json의 모든 데이터를 읽을 때, 신중하게 보기 위해서, 브라우저에 따라 다음 절차에 따라 브라우저 캐시를 제거하십시오
(캐시에 데이터가 있는 경우 테이블에 표시된 행 수는 이전 상태로 유지됩니다.)

IE의 경우

Windows: "Ctrl"+ "F5"

Safari의 경우

Mac: "Option"+ "Command"+ "E"

Firefox의 경우

Windows의 경우 "Ctrl"+ "F5"

Mac의 경우 Shft + Command + R

Google Chrome의 경우

Windows의 경우 "Ctrl"+ "F5"

Mac의 경우 Shft + Command + R

23170 행의 LRFRefSeqGene의 모든 데이터를 표시할 수 있음
혜택:
create_json.py는 -rows로 변환된 줄 수를 지정할 수 있습니다
예를 들어, 처음 1000행을 체크 아웃하려면 다음을 참조하십시오.

$ python3 ./create_json.py --rows 1000

3. 탭 구분자 파일을 tabulator로 표시처럼 Height 매개 변수가 없는 상황에서 여러 줄의 데이터를 표시하여 Virtual DOM의 장점을 실감할 수 있다
이번엔 여기까지