modernGraphTool을 메인으로 두기

이 구성에서는 modernGraphTool을 도메인 루트에 첫 화면으로 두고, CrinGraph는 하위 폴더에서 제공합니다. 두 도구 모두 같은 data/ 폴더를 읽습니다. 반대 구성은 CrinGraph와 동시 운영을 참고하세요.

단계별 가이드

1. 프로젝트 준비

modernGraphTool — 운영자 가이드에서 설명한 절차에 따라 modernGraphTool 데이터베이스를 준비하세요.
CrinGraph — CrinGraph 프로젝트 파일을 준비합니다. 추가 기능이 들어간 커스텀 버전이어도 괜찮습니다.

2. 파일 경로 설정

폴더 최상단에는 modernGraphTool용 index.html이 있어야 합니다.

최상단에 CrinGraph를 둘 새 폴더(예: cringraph)를 만들고, CrinGraph 프로젝트 파일을 모두 그 안으로 옮겨 넣습니다.

cringraph 안에도 CrinGraph용 index.html이 함께 있어야 합니다.

파일 구조 예시:

/project-root/
├── data
|   ├── phones          # 'phone' 측정 데이터 폴더
|   ├── target          # 'target' 측정 데이터 폴더
|   └── phone_book.json # 기기 목록 명단
├── index.html          # modernGraphTool 접속 포인트
├── ...기타 modernGraphTool 파일...
└── cringraph
    ├── index.html      # CrinGraph 접속 포인트
    └── ...기타 CrinGraph 파일...

3. CrinGraph 코드 수정

같은 측정 데이터를 두 폴더에 중복으로 두는 건 비효율적입니다. CrinGraph가 부모 경로의 데이터를 가져올 수 있도록 소스를 살짝 손봅니다.

수정해야 할 파일은 다음과 같습니다.

graphtool.js
config.js (필요하다면 config_hp.js도)

아래 예시는 squiglink/labs 버전의 CrinGraph를 기준으로 합니다.

graphtool.js

787번 라인으로 이동해 loadFiles 함수를 수정합니다.

// 수정 전
let l = (f) => d3.text(DIR + f + '.txt').catch(() => null);
let f = p.isTarget
  ? [l(p.fileName)]
  : d3.merge(LR.map((s) => sampnums.map((n) => l(p.fileName + ' ' + s + n))));

// 수정 후
// 다른 이름의 폴더에 측정 데이터를 두고 있다면 'phones', 'target' 대신 실제 이름을 적어야 합니다.
let l = (f) => d3.text(DIR + 'phones/' + f + '.txt').catch(() => null);
let lt = (f) => d3.text(DIR + 'target/' + f + '.txt').catch(() => null);
let f = p.isTarget
  ? [lt(p.fileName)]
  : d3.merge(LR.map((s) => sampnums.map((n) => l(p.fileName + ' ' + s + n))));

config.js

3번 라인으로 이동해 DIR 값을 수정합니다.

// 수정 전
DIR = "data/",

// 수정 후
// '../'는 부모 경로를 의미합니다.
DIR = "../data/",

Haruto의 추가 기능이 적용된 CrinGraph(PublicGraphTool / ExtendedGraphTool)를 쓰고 있다면 다음 부분도 함께 고치세요.

// 55번 줄 수정 전
PHONE_BOOK = "phone_book.json", // Path to phone book JSON file

// 수정 후
PHONE_BOOK = "../data/phone_book.json", // Path to phone book JSON file

4. 내비게이션 버튼 추가하기

여기까지 끝냈다면 다음 두 주소로 그래프 도구에 접근할 수 있어야 합니다.

modernGraphTool — https://yourdomain.com/
CrinGraph — https://yourdomain.com/cringraph/ (폴더 이름)

두 도구를 쉽게 오갈 수 있도록 각각에 내비게이션 버튼을 추가해 둘 수 있습니다.

modernGraphTool

config.js에 다음을 추가합니다.

TOPBAR: {
  LINK_LIST: { TITLE: "Go to CrinGraph", URL: "https://yourdomain.com/cringraph" },
  // 또는
  LINK_LIST: { TITLE: "Go to CrinGraph", URL: "./cringraph" },
}

CrinGraph

config.js에 다음을 추가합니다.

headerLinks = [
  {
    name: 'Head back to modernGraphTool',
    url: 'https://yourdomain.com/'
  },
  // 또는
  {
    name: 'Head back to modernGraphTool',
    url: '../'
  }
];

5. 배포

지금까지 작업한 프로젝트를 웹 서버에 업로드합니다. 폴더 구조가 그대로 유지되었는지 한 번 확인해 보세요.

여기까지 무사히 마쳤다면 두 그래프 도구를 위 안내대로 함께 사용할 수 있습니다.

squig.link 데이터베이스에서 작업하는 경우, 파일 캐시 때문에 변경 사항이 바로 보이지 않을 수 있습니다.

데이터베이스 주소 뒤에 ?cachebust를 붙여 다시 접속하면 캐시를 새로고침할 수 있습니다.

예시) https://example.squig.link/?cachebust