일단 기본적으로 필요한것은,,,,
1) d3(모듈)의 기본 배치 방법을 알아야한다..
2) d3fc는 npm(node.js의 모듈 라이브러리)를 기반으로 하는것이라,,,,,node.js 의 npm로 모듈 까는 방법을 알아야한다..
1) d3 html 기본 배치
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
</head>
<body>
<!-- 순서를 지켜야한다-->
<script src="https://d3js.org/d3.v5.min.js"></script> <!-- d3사이트랑 연결-->
<div class="one-graph"></div> <!---d3_app.js파일 안에 그래프를 가져와 html에 표시-->
<script src="d3_app.js"></script> <!--d3_app.js랑 연결-->
</body>
</html>
2) npm 까는법 이용법은 설명했지만,, 간단히 설명하자면
CMD(명령 프롬프트)로 해당 파일이 있는곳에,,, 경로(cd 경로)를 설정하고,,
'npm init' 치고,, 내용 설정하고,,,,,yes 친다
그리고 'npm install 모듈이름 --save'를 친다. 삭제하려면 install 대신에 uninstall 치면 된다.
===========================================================
d3fc설정
*html 기본설정
-------------------------
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>kurenai</h1>
<script src="https://d3js.org/d3.v5.min.js"></script> <!--d3연결 -->
<script src="node_modules/d3/build/d3.min.js"></script> #1<!--d3fc모듈로 연결-->
<script src="node_modules/d3fc/build/d3fc.min.js"></script> <!--d3fc모듈로 연결-->
<div id="chart" style="width: 100%; height: 250px"></div> <!--표시-->
<script src="abc.js"></script> <!--.js 파일과 연결-->
</body>
</html>
------------------------
#1 과 같은 npm install 모듈 대신에.... 넷(CDN이라고 부른다)으로 연결해도 된다...
<script src="https://unpkg.com/d3/build/d3.min.js"></script>
<script src="https://unpkg.com/d3fc/build/d3fc.min.js"></script>
주의 : https: 가 안붙인체로 나올 수 도 있다.
* .js 파일은 베껴서 집어넣으면 된다...... 구체적인 내용은,,,, 그때 파일을 보면서 배우면 된다....
====================================================================
*웹서버에서만 작동해야 해야하는 경우가 있을때,,,,
모든게 그런건 아니지만,,,,상당수가 그럴수 있따..
개발자도구에서 console을 클릭하면,,,, 다양한 오류를 확인할 수 있다..
Solution to Chrome Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.
http://127.0.0.1/파일이름.html
아니면,,,,, 네트워크에 들어가 나의 주소를 찾아서 집어 넣어도 된다. (ipv4주소가 나의 주소일것이다)
http://주소/파일이름.html 이런식으로...
위의 내용은 같은 네트워크에 속한 사람(즉 같은 주소)만,, 접속할수 있는 것이다....
같은 네트워크에 있지 않는 사람,,,,
도메인 이름을 사용해서 접속하는 방법이 아니다....
(어차피 여기서의 목표는 d3fc가 서버쪽에서만 돌게 해서 작동시키는 게 목표니까...)
===================================================================
https://d3fc.io/introduction/getting-started.html : d3fc 본사이트, 설치에 대한 설명
'코딩' 카테고리의 다른 글
| 웹서버 운영 : 윈도우 (아파치, 설치, 웹서버와 http, 웹브라우저와 웹서버의 통신) (0) | 2018.11.11 |
|---|---|
| 에러: Solution to Chrome Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource. (1) | 2018.11.11 |
| 윈도우 명령프롬프트 cmd 키 설정 (경로 종료 따위) (0) | 2018.11.10 |
| 파이선 장고 실행 : 초기 pip 설치/ 패키지 / path (0) | 2018.11.10 |
| npm으로 모듈설치/사용법 (0) | 2018.11.10 |