Merge branch 'dev' of github.com:gywgithub/vue-d3-examples into dev

Author: gywgithub

README.md

@@ -12,6 +12,8 @@ d3: `v5.9.1`
 
 https://gywgithub.github.io/vue-d3-examples/
 
+**Please use chrome browser**
+
 ### Project setup
 ```
 npm install

src/App.vue

@@ -27,4 +27,12 @@ body,
 .cursor-pointer {
   cursor: pointer;
 }
+
+.text-align-center {
+  text-align: center;
+}
+
+.text-align-left {
+  text-align: left;
+}
 </style>

src/components/Axis.vue

@@ -11,7 +11,7 @@ export default {
     return {}
   },
   mounted () {
-    let marge = { top: 60, bottom: 60, left: 60, right: 60 }
+    let marge = { top: 10, bottom: 60, left: 10, right: 60 }
     let dataset = [ 2.5, 2.1, 1.7, 1.3, 0.9 ]
     let scaleLinear = d3.scaleLinear()
       .domain([0, d3.max(dataset)])

src/components/BarChartI.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <h2>Bar Chart I</h2>
-    <div class="container-chart">
+    <div class="container-chart text-align-left">
       <div class="chart"></div>
     </div>
   </div>
@@ -24,7 +24,6 @@ export default {
 }
 </script>
 <style scoped>
-
 </style>
 
 <style>
@@ -37,7 +36,7 @@ export default {
   color: white;
 }
 .container-chart {
-  width: 50%;
+  /* width: 50%; */
   margin: auto;
 }
 </style>

src/components/ForceBasedLabelPlacementI.vue

@@ -9,12 +9,28 @@
 import * as d3 from 'd3'
 export default {
   name: 'ForceBasedLabelPlacementI',
-  mounted () {
+  async mounted () {
     let width = 1000
     let height = 700
     let color = d3.scaleOrdinal(d3.schemeCategory10)
+    console.log(window.location) // eslint-disable-line
+    // localhost or 127.0.0.1
     let fileAddress = window.location.origin + '/json/miserables.json'
-    console.log(fileAddress)
+    await fetch({
+      url: fileAddress,
+      method: 'get'
+    }).then(res => {
+      console.log(1)
+      console.log(res) // eslint-disable-line
+      if (res.status === 404) {
+        fileAddress = window.location.href.split('/examples/forcebasedI')[0] + '/json/miserables.json'
+      }
+    }).catch(err => {
+      console.log(2)
+      console.log(err) // eslint-disable-line
+      // fileAddress = window.location.href.split('/examples/forcebasedI')[0] + '/json/miserables.json'
+    })
+    console.log('json file url: ', fileAddress) // eslint-disable-line
     d3.json(fileAddress).then(function (graph) {
       let label = {
         'nodes': [],

src/components/Scale.vue

@@ -70,4 +70,10 @@ export default {
 }
 </script>
 <style scoped>
+.container {
+  width: 100%;
+  padding: 0 !important;
+  margin-right: auto;
+  margin-left: auto;
+}
 </style>

src/views/Examples.vue

@@ -89,7 +89,7 @@ export default {
     dark: false,
     drawer: null,
     itemActive: 0,
-    subItemActive: null,
+    subItemActive: 0,
     items: [
       // {
       //   icon: 'mdi-alpha-b-box-outline',
@@ -179,25 +179,21 @@ export default {
       this.dark = true
     }
     if (this.$route.path === '/examples') {
-      console.log('/example') // eslint-disable-line
       this.$router.push('/examples/helloworld').catch(err => { }) // eslint-disable-line
     } else {
-      console.log(this.$route) // eslint-disable-line
       this.$router.push(this.$route.path).catch(err => { }) // eslint-disable-line
-    }
-    if (sessionStorage.getItem('itemActive')) {
-      this.items[0].active = false
-      this.items[Number(sessionStorage.getItem('itemActive'))]['active'] = true
-    }
-    console.log(this.items)
 
-    if (sessionStorage.getItem('subItemActive')) {
-      this.subItemActive = Number(sessionStorage.getItem('subItemActive'))
-      console.log(sessionStorage.getItem('subItemActive'))
-      console.log(133)
+      if (sessionStorage.getItem('itemActive')) {
+        this.items[0].active = false
+        this.items[Number(sessionStorage.getItem('itemActive'))]['active'] = true
+      }
+
+      if (sessionStorage.getItem('subItemActive')) {
+        this.subItemActive = Number(sessionStorage.getItem('subItemActive'))
+      }
     }
   },
-  beforeDestory () {
+  beforeDestroy () {
     sessionStorage.removeItem('subItemActive')
     sessionStorage.removeItem('itemActive')
   },
@@ -207,11 +203,9 @@ export default {
     },
     itemClick (item, key) {
       this.subItemActive = null
-      console.log(item, key) // eslint-disable-line
       sessionStorage.setItem('itemActive', key)
     },
     subItemClick (item, key) {
-      console.log(item, key) // eslint-disable-line
       sessionStorage.setItem('subItemActive', key)
       this.$router.push(item.path).catch(err => { }) // eslint-disable-line
     },

src/views/Home.vue

@@ -1,9 +1,9 @@
 <template>
   <div class="main justify-center">
-    <div class="flex-column margin-top-200">
+    <div class="flex-column margin-top-15vh">
       <div class="d-flex justify-center">
         <img src="../assets/img/vue.png" class="d-flex img-width" />
-        <img src="../assets/img/d3.svg" class="d-flex img-width img-d3-margin" />
+        <img src="../assets/img/d3.svg" class="d-flex img-width img-d3-padding" />
       </div>
       <div
         class="display-3 font-weight-regular span-margin"
@@ -52,17 +52,17 @@ export default {
 .main {
   text-align: center;
 }
-.margin-top-200 {
-  margin-top: 200px;
+.margin-top-15vh {
+  margin-top: 15vh;
 }
 
 .img-width {
-  width: 180px !important;
+  width: 12% !important;
+  margin: 0 35px;
 }
 
-.img-d3-margin {
+.img-d3-padding {
   padding: 10px;
-  margin-left: 80px;
 }
 
 .span-margin {