VUE 생키 다이어그램 ( SankeyChart )여러 노드 연결 표현

처음에는 구글 라이브러리를 쓸려다 

혹시 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? 여하튼 그걸로 인하여 

이미 변..경 ㅎㅎㅎ

샘플 적용 끄~읏