처음에는 구글 라이브러리를 쓸려다
혹시 VUE 라이브러리도 있을까? 하고 찾아봤더니 있었음 !!!! ㅎㅎㅎ
vue 컴퍼넌트 설치 방법 공유
우선 PC에
- nodeJs 설치 필요 그래야 npm 사용 가능 !!!
설치 후 VS_CODE 나 CMD 로
cmd 에서 node -v 버전 나오면 설치 된거임
Webpack 설치(vue 통합 프레임웍 이라고 생각)
https://github.com/vuejs-templates/webpack-simple
$ npm install -g vue-cli
$ vue init webpack-simple my-project
$ cd my-project
$ npm install
$ npm run dev
프로젝트 뜨는것 확인 후 !!! ( 자동으로 브라우저가 뜬다) 해당 설정은 webpack.config.js 에서 확인 가능
다시 VUE-D2B 설치 (생키 다이어그램을 위해서 )
https://github.com/d2bjs/vue-d2b
$ npm install vue-d2b --save
http://localhost:8080 에서 제일 처음 호출 되는 Vue 찾아서
- my-project 에 App.vue
소스 변경 ( 안에 데이터를 좀 변경해봄)
<template>
<div class = 'chart'>
<chart-sankey :data = 'chartData' :config = 'chartConfig'></chart-sankey>
</div>
</template>
<script>
import { ChartSankey } from 'vue-d2b'
export default {
data () {
return {
// The chart data varies from chart to chart. To see what type of data
// to provide each chart type head over to the d2bjs.org docs.
chartData: {
nodes: [
{name: 'Node A'},
{name: 'Node A_1'},
{name: 'Node A_2'},
{name: 'Node A_3'},
{name: 'Node A_4'},
{name: 'Node B'},
{name: 'Node C'},
{name: 'Node D'},
{name: 'Node E'},
{name: 'Node 1'}
],
links: [
{source: 'Node A', target: 'Node E', value: 200},
{source: 'Node A', target: 'Node C', value: 2000},
{source: 'Node B', target: 'Node C', value: 3200},
{source: 'Node B', target: 'Node D', value: 300},
{source: 'Node C', target: 'Node D', value: 200},
{source: 'Node C', target: 'Node E', value: 1202},
{source: 'Node C', target: 'Node 1', value: 2400},
{source: 'Node 1', target: 'Node E', value: 2800},
{source: 'Node A_1', target: 'Node C', value: 120},
{source: 'Node A_2', target: 'Node C', value: 20},
{source: 'Node A_3', target: 'Node C', value: 40},
{source: 'Node A_4', target: 'Node C', value: 80},
{source: 'Node D', target: 'Node E', value: 400}
]
},
// There are many configuration options for each chart type, checkout
// the d2bjs.org docs for more information.
chartConfig (chart) {
chart
// returns the d2b svg sankey generator
.sankey()
// returns the d3 sankey generator
.sankey()
// now configure the d3 sankey generator through method chaining
.nodePadding(50)
}
}
},
components: {
ChartSankey
}
}
</script>
<style scoped>
.chart{
height: 500px;
}
</style>
소스 저장하는 순간 !!!
webpack 에서 설치된 hot reload? 여하튼 그걸로 인하여
이미 변..경 ㅎㅎㅎ
샘플 적용 끄~읏
