├── src
    ├── assets
    │   ├── colors.css
    │   ├── logo.png
    │   └── ant-theme.less
    ├── shims-vue.d.ts
    ├── views
    │   ├── index.vue
    │   ├── About.vue
    │   ├── Home.vue
    │   ├── charts
    │   │   ├── components
    │   │   │   ├── circle.vue
    │   │   │   ├── bar.vue
    │   │   │   ├── line.vue
    │   │   │   └── relation.vue
    │   │   └── index.vue
    │   ├── graphics
    │   │   ├── components
    │   │   │   ├── circle.vue
    │   │   │   ├── bar.vue
    │   │   │   ├── line.vue
    │   │   │   └── relation.vue
    │   │   └── index.vue
    │   ├── others
    │   │   └── 404.vue
    │   ├── charts.vue
    │   └── layout
    │   │   └── index.vue
    ├── store.ts
    ├── shims-tsx.d.ts
    ├── App.vue
    ├── main.ts
    ├── registerServiceWorker.ts
    ├── router
    │   └── index.ts
    └── components
    │   └── HelloWorld.vue
├── .browserslistrc
├── colors.js
├── public
    ├── robots.txt
    ├── img
    │   └── favicon.ico
    ├── manifest.json
    └── index.html
├── babel.config.js
├── postcss.config.js
├── README.md
├── .gitignore
├── tests
    ├── unit
    │   └── example.spec.ts
    └── e2e
    │   ├── specs
    │       └── test.js
    │   └── custom-assertions
    │       └── elementCount.js
├── tslint.json
├── tsconfig.json
├── package.json
└── vue.config.js


/src/assets/colors.css:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/.browserslistrc:
--------------------------------------------------------------------------------
1 | > 1%
2 | last 2 versions
3 | 


--------------------------------------------------------------------------------
/colors.js:
--------------------------------------------------------------------------------
1 | export default colors ={
2 |     
3 | }


--------------------------------------------------------------------------------
/public/robots.txt:
--------------------------------------------------------------------------------
1 | User-agent: *
2 | Disallow:
3 | 


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/app'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: {
3 |     autoprefixer: {}
4 |   }
5 | }
6 | 


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/calamus0427/vue-d3/master/src/assets/logo.png


--------------------------------------------------------------------------------
/public/img/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/calamus0427/vue-d3/master/public/img/favicon.ico


--------------------------------------------------------------------------------
/src/shims-vue.d.ts:
--------------------------------------------------------------------------------
1 | declare module '*.vue' {
2 |   import Vue from 'vue';
3 |   export default Vue;
4 | }
5 | 


--------------------------------------------------------------------------------
/src/views/index.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |     <div>
3 |         <a href="//calamus.xyz" target="_blank">Calamus</a>
4 |     </div>
5 | </template>
6 | 


--------------------------------------------------------------------------------
/src/store.ts:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue';
 2 | import Vuex from 'vuex';
 3 | 
 4 | Vue.use(Vuex);
 5 | 
 6 | export default new Vuex.Store({
 7 |   state: {
 8 | 
 9 |   },
10 |   mutations: {
11 | 
12 |   },
13 |   actions: {
14 | 
15 |   },
16 | });
17 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # vue-d3
 2 | > 基于vue-cli3 实现的d3.js demo项目，在vue中使用d3
 3 | 
 4 | [示例](http://calamus.wiki/vue-d3/)
 5 | 
 6 | ## Project setup
 7 | ```
 8 | # 安装依赖
 9 | npm install
10 | # 启动
11 | npm run serve
12 | # 打包部署
13 | npm run build
14 | # 测试
15 | npm run test
16 | npm run lint
17 | npm run test:e2e
18 | npm run test:unit
19 | 
20 | ```
21 | 


--------------------------------------------------------------------------------
/src/views/About.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="about">
 3 |     <a-button type="primary">Primary</a-button>
 4 |   </div>
 5 | </template>
 6 | <style lang="less" scoped>
 7 | #nav {
 8 |   padding: 30px;
 9 |   a {
10 |     font-weight: bold;
11 |     color: #2c3e50;
12 |     &.router-link-exact-active {
13 |       color: #42b983;
14 |     }
15 |   }
16 | }
17 | </style>
18 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | /tests/e2e/reports/
 6 | selenium-debug.log
 7 | 
 8 | # local env files
 9 | .env.local
10 | .env.*.local
11 | 
12 | # Log files
13 | npm-debug.log*
14 | yarn-debug.log*
15 | yarn-error.log*
16 | 
17 | # Editor directories and files
18 | .idea
19 | .vscode
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 | 


--------------------------------------------------------------------------------
/src/shims-tsx.d.ts:
--------------------------------------------------------------------------------
 1 | import Vue, { VNode } from 'vue';
 2 | 
 3 | declare global {
 4 |   namespace JSX {
 5 |     // tslint:disable no-empty-interface
 6 |     interface Element extends VNode {}
 7 |     // tslint:disable no-empty-interface
 8 |     interface ElementClass extends Vue {}
 9 |     interface IntrinsicElements {
10 |       [elem: string]: any;
11 |     }
12 |   }
13 | }
14 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <router-view/>
 4 |   </div>
 5 | </template>
 6 | 
 7 | <style lang="less">
 8 | #app {
 9 |   font-family: 'Avenir', Helvetica, Arial, sans-serif;
10 |   -webkit-font-smoothing: antialiased;
11 |   -moz-osx-font-smoothing: grayscale;
12 |   color: #2c3e50;
13 |   height: 100%;
14 |   box-sizing: border-box;
15 | }
16 | 
17 | </style>
18 | 


--------------------------------------------------------------------------------
/src/main.ts:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue';
 2 | import App from './App.vue';
 3 | import router from './router/index';
 4 | import store from './store';
 5 | import Antd from 'ant-design-vue' ;
 6 | import 'ant-design-vue/dist/antd.less' ;
 7 | import './registerServiceWorker';
 8 | 
 9 | 
10 | Vue.config.productionTip = false;
11 | Vue.use(Antd) ;
12 | 
13 | new Vue({
14 |   router,
15 |   store,
16 |   render: (h) => h(App),
17 | }).$mount('#app');
18 | 


--------------------------------------------------------------------------------
/tests/unit/example.spec.ts:
--------------------------------------------------------------------------------
 1 | import { expect } from 'chai';
 2 | import { shallowMount } from '@vue/test-utils';
 3 | import HelloWorld from '@/components/HelloWorld.vue';
 4 | 
 5 | describe('HelloWorld.vue', () => {
 6 |   it('renders props.msg when passed', () => {
 7 |     const msg = 'new message';
 8 |     const wrapper = shallowMount(HelloWorld, {
 9 |       propsData: { msg },
10 |     });
11 |     expect(wrapper.text()).to.include(msg);
12 |   });
13 | });
14 | 


--------------------------------------------------------------------------------
/tslint.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "defaultSeverity": "warning",
 3 |   "extends": [
 4 |     "tslint:recommended"
 5 |   ],
 6 |   "linterOptions": {
 7 |     "exclude": [
 8 |       "node_modules/**"
 9 |     ]
10 |   },
11 |   "rules": {
12 |     "quotemark": [true, "single"],
13 |     "indent": [true, "spaces", 2],
14 |     "interface-name": false,
15 |     "ordered-imports": false,
16 |     "object-literal-sort-keys": false,
17 |     "no-consecutive-blank-lines": false
18 |   }
19 | }
20 | 


--------------------------------------------------------------------------------
/tests/e2e/specs/test.js:
--------------------------------------------------------------------------------
 1 | // For authoring Nightwatch tests, see
 2 | // http://nightwatchjs.org/guide#usage
 3 | 
 4 | module.exports = {
 5 |   'default e2e tests': browser => {
 6 |     browser
 7 |       .url(process.env.VUE_DEV_SERVER_URL)
 8 |       .waitForElementVisible('#app', 5000)
 9 |       .assert.elementPresent('.hello')
10 |       .assert.containsText('h1', 'Welcome to Your Vue.js + TypeScript App')
11 |       .assert.elementCount('img', 1)
12 |       .end()
13 |   }
14 | }
15 | 


--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-d3",
 3 |   "short_name": "vue-d3",
 4 |   "icons": [
 5 |     {
 6 |       "src": "https://cdn.calamus.xyz/favicon.ico",
 7 |       "sizes": "192x192",
 8 |       "type": "image/png"
 9 |     },
10 |     {
11 |       "src": "https://cdn.calamus.xyz/favicon.ico",
12 |       "sizes": "512x512",
13 |       "type": "image/png"
14 |     }
15 |   ],
16 |   "start_url": "./index.html",
17 |   "display": "standalone",
18 |   "background_color": "#000000",
19 |   "theme_color": "#4DBA87"
20 | }
21 | 


--------------------------------------------------------------------------------
/src/assets/ant-theme.less:
--------------------------------------------------------------------------------
 1 | /* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */
 2 | 
 3 | // The prefix to use on all css classes from ant.
 4 | 
 5 | // -------- Colors -----------
 6 | @primary-color :pink;
 7 | // @info-color : @blue-6;
 8 | // @success-color : @green-6;
 9 | // @processing-color : @blue-6;
10 | // @error-color : @red-6;
11 | // @highlight-color : @red-6;
12 | // @warning-color : @gold-6;
13 | // @normal-color : #d9d9d9;
14 | // @white: #fff;
15 | // @black: #000;
16 | 
17 | 


--------------------------------------------------------------------------------
/src/views/Home.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="home">
 3 |     <img alt="Vue logo" src="https://cdn.calamus.xyz/leimu.jpeg">
 4 |     <HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/>
 5 |   </div>
 6 | </template>
 7 | 
 8 | <script lang="ts">
 9 | import { Component, Vue } from 'vue-property-decorator';
10 | import HelloWorld from '@/components/HelloWorld.vue'; // @ is an alias to /src
11 | 
12 | @Component({
13 |   components: {
14 |     HelloWorld,
15 |   },
16 | })
17 | export default class Home extends Vue {}
18 | </script>
19 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="https://cdn.calamus.xyz/favicon.ico">
 8 |     <title>vue-d3</title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but vue-d3 doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 |     </noscript>
14 |     <div id="app"></div>
15 |     <!-- built files will be auto injected -->
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/src/views/charts/components/circle.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <svg width="500" height="300" ></svg>
 3 | </template>
 4 | 
 5 | <script>
 6 | import * as d3 from 'd3';
 7 | 
 8 | export default {
 9 |   name: 'chart-line',
10 |   data() {
11 |     return {
12 | 
13 |     };
14 |   },
15 |   mounted() {
16 |     this.initCircle();
17 |   },
18 |   methods: {
19 |     initCircle() {
20 |       d3.select(this.$el)
21 |         .append('circle')
22 |         .attr('cx', '150')
23 |         .attr('fill', 'pink')
24 |         .attr('cy', '150')
25 |         .attr('r', '100')
26 |     },
27 |   },
28 | };
29 | </script>
30 | <style lang="less" scoped>
31 | svg{
32 |  margin: 25px;
33 | //  fill: @primary-color ;
34 | }
35 | </style>
36 | 
37 | 


--------------------------------------------------------------------------------
/src/views/graphics/components/circle.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <svg width="500" height="300" ></svg>
 3 | </template>
 4 | 
 5 | <script>
 6 | import * as d3 from 'd3';
 7 | 
 8 | export default {
 9 |   name: 'chart-line',
10 |   data() {
11 |     return {
12 | 
13 |     };
14 |   },
15 |   mounted() {
16 |     this.initCircle();
17 |   },
18 |   methods: {
19 |     initCircle() {
20 |       d3.select(this.$el)
21 |         .append('circle')
22 |         .attr('cx', '150')
23 |         .attr('fill', 'pink')
24 |         .attr('cy', '150')
25 |         .attr('r', '100')
26 |     },
27 |   },
28 | };
29 | </script>
30 | <style lang="less" scoped>
31 | svg{
32 |  margin: 25px;
33 | //  fill: @primary-color ;
34 | }
35 | </style>
36 | 
37 | 


--------------------------------------------------------------------------------
/tests/e2e/custom-assertions/elementCount.js:
--------------------------------------------------------------------------------
 1 | // A custom Nightwatch assertion.
 2 | // The assertion name is the filename.
 3 | // Example usage:
 4 | //
 5 | //   browser.assert.elementCount(selector, count)
 6 | //
 7 | // For more information on custom assertions see:
 8 | // http://nightwatchjs.org/guide#writing-custom-assertions
 9 | 
10 | exports.assertion = function elementCount (selector, count) {
11 |   this.message = `Testing if element <${selector}> has count: ${count}`
12 |   this.expected = count
13 |   this.pass = val => val === count
14 |   this.value = res => res.value
15 |   function evaluator (_selector) {
16 |     return document.querySelectorAll(_selector).length
17 |   }
18 |   this.command = cb => this.api.execute(evaluator, [selector], cb)
19 | }
20 | 


--------------------------------------------------------------------------------
/src/views/charts/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div style="width: 500px">
 3 |         <a-tabs defaultActiveKey="1" tabPosition="left">
 4 |             <a-tab-pane tab="简单线条" key="1">
 5 |                 <chart-line />
 6 |             </a-tab-pane>
 7 |             <a-tab-pane tab="条形图" key="2">
 8 |                 <chart-bar />
 9 |             </a-tab-pane>
10 |             <a-tab-pane tab="圆" key="3">
11 |                 <chart-circle />
12 |             </a-tab-pane>
13 |         </a-tabs>
14 |     </div>
15 | </template>
16 | 
17 | <script>
18 | import chartLine  from './components/line.vue' ;
19 | import chartBar  from './components/bar.vue' ;
20 | import chartCircle  from './components/circle.vue' ;
21 | 
22 | export default {
23 |     name: 'charts',
24 |     components:{
25 |         chartLine,
26 |         chartBar,
27 |         chartCircle
28 |     }
29 | 
30 | }
31 | </script>
32 | 


--------------------------------------------------------------------------------
/src/views/graphics/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div style="width: 500px">
 3 |         <a-tabs defaultActiveKey="1" tabPosition="left">
 4 |             <a-tab-pane tab="简单线条" key="1">
 5 |                 <chart-line />
 6 |             </a-tab-pane>
 7 |             <a-tab-pane tab="条形图" key="2">
 8 |                 <chart-bar />
 9 |             </a-tab-pane>
10 |             <a-tab-pane tab="圆" key="3">
11 |                 <chart-circle />
12 |             </a-tab-pane>
13 |         </a-tabs>
14 |     </div>
15 | </template>
16 | 
17 | <script>
18 | import chartLine  from './components/line.vue' ;
19 | import chartBar  from './components/bar.vue' ;
20 | import chartCircle  from './components/circle.vue' ;
21 | 
22 | export default {
23 |     name: 'charts',
24 |     components:{
25 |         chartLine,
26 |         chartBar,
27 |         chartCircle
28 |     }
29 | 
30 | }
31 | </script>
32 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "esnext",
 4 |     "module": "esnext",
 5 |     "strict": true,
 6 |     "jsx": "preserve",
 7 |     "importHelpers": true,
 8 |     "moduleResolution": "node",
 9 |     "experimentalDecorators": true,
10 |     "esModuleInterop": true,
11 |     "allowSyntheticDefaultImports": true,
12 |     "sourceMap": true,
13 |     "baseUrl": ".",
14 |     "types": [
15 |       "webpack-env",
16 |       "mocha",
17 |       "chai"
18 |     ],
19 |     "paths": {
20 |       "@/*": [
21 |         "src/*"
22 |       ]
23 |     },
24 |     "lib": [
25 |       "esnext",
26 |       "dom",
27 |       "dom.iterable",
28 |       "scripthost"
29 |     ]
30 |   },
31 |   "include": [
32 |     "src/**/*.ts",
33 |     "src/**/*.tsx",
34 |     "src/**/*.vue",
35 |     "tests/**/*.ts",
36 |     "tests/**/*.tsx"
37 |   ],
38 |   "exclude": [
39 |     "node_modules"
40 |   ]
41 | }
42 | 


--------------------------------------------------------------------------------
/src/views/charts/components/bar.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="chart"></div>
 3 | </template>
 4 | 
 5 | <script>
 6 | import * as d3 from 'd3';
 7 | 
 8 | export default {
 9 |   name: 'chart-bar',
10 |   data() {
11 |     return {
12 |         data : [30, 86, 168, 281, 303, 365],
13 |     };
14 |   },
15 |   mounted() {
16 |     this.initBar();
17 |   },
18 |   methods: {
19 |     initBar() {
20 |       d3.select(".chart")
21 |         .selectAll("div")
22 |         .data(this.data)
23 |             .enter()
24 |             .append("div")
25 |             .style("width", function(d) { return d + "px"; })
26 |             .text(function(d) { return d; });
27 |     },
28 |   },
29 | };
30 | </script>
31 | <style lang="less">
32 | // 注意：不能用scoped写样式，否则无法加载
33 | .chart  {
34 |     div{
35 |         font: 10px sans-serif;
36 |         background-color: @primary-color;
37 |         text-align: right;
38 |         padding: 3px;
39 |         margin: 1px;
40 |         color: white;
41 |     }
42 | 
43 | }
44 | </style>
45 | 
46 | 


--------------------------------------------------------------------------------
/src/views/graphics/components/bar.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="chart"></div>
 3 | </template>
 4 | 
 5 | <script>
 6 | import * as d3 from 'd3';
 7 | 
 8 | export default {
 9 |   name: 'chart-bar',
10 |   data() {
11 |     return {
12 |         data : [30, 86, 168, 281, 303, 365],
13 |     };
14 |   },
15 |   mounted() {
16 |     this.initBar();
17 |   },
18 |   methods: {
19 |     initBar() {
20 |       d3.select(".chart")
21 |         .selectAll("div")
22 |         .data(this.data)
23 |             .enter()
24 |             .append("div")
25 |             .style("width", function(d) { return d + "px"; })
26 |             .text(function(d) { return d; });
27 |     },
28 |   },
29 | };
30 | </script>
31 | <style lang="less">
32 | // 注意：不能用scoped写样式，否则无法加载
33 | .chart  {
34 |     div{
35 |         font: 10px sans-serif;
36 |         background-color: @primary-color;
37 |         text-align: right;
38 |         padding: 3px;
39 |         margin: 1px;
40 |         color: white;
41 |     }
42 | 
43 | }
44 | </style>
45 | 
46 | 


--------------------------------------------------------------------------------
/src/registerServiceWorker.ts:
--------------------------------------------------------------------------------
 1 | /* tslint:disable:no-console */
 2 | 
 3 | import { register } from 'register-service-worker';
 4 | 
 5 | if (process.env.NODE_ENV === 'production') {
 6 |   register(`${process.env.BASE_URL}service-worker.js`, {
 7 |     ready() {
 8 |       console.log(
 9 |         'App is being served from cache by a service worker.\n' +
10 |         'For more details, visit https://goo.gl/AFskqB',
11 |       );
12 |     },
13 |     registered() {
14 |       console.log('Service worker has been registered.');
15 |     },
16 |     cached() {
17 |       console.log('Content has been cached for offline use.');
18 |     },
19 |     updatefound() {
20 |       console.log('New content is downloading.');
21 |     },
22 |     updated() {
23 |       console.log('New content is available; please refresh.');
24 |     },
25 |     offline() {
26 |       console.log('No internet connection found. App is running in offline mode.');
27 |     },
28 |     error(error) {
29 |       console.error('Error during service worker registration:', error);
30 |     },
31 |   });
32 | }
33 | 


--------------------------------------------------------------------------------
/src/views/others/404.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="main">
 3 |       <section>
 4 |           <div class="content">抱歉!访问的页面不存在.</div>
 5 |           <a-button type="primary" class="gohome" @click="backToHome">回首页 :P</a-button>
 6 |       </section>
 7 |   </div>
 8 | </template>
 9 | 
10 | <script>
11 | export default {
12 |   name: 'Page404',
13 |   methods: {
14 |     backToHome () {
15 |       this.$router.push('/')
16 |     }
17 |   }
18 | }
19 | </script>
20 | 
21 | <style lang="less" scoped>
22 | .main{
23 |     display: flex;
24 |     justify-content: center;
25 |     align-items:center;
26 |     >section {
27 |         justify-content: center;
28 |         align-items:center;
29 |         display: inherit;
30 |         flex-direction: column;
31 |         width:400px;
32 |         height:200px;
33 |         margin-top:15%;
34 |         background-color: white;
35 |         border-radius:15px;
36 |         .content{
37 |         font-size:1.7rem;
38 |         }
39 | 
40 |         .gohome{
41 |         margin-top:15px;
42 |         }
43 | 
44 |     }
45 | }
46 | </style>
47 | 


--------------------------------------------------------------------------------
/src/router/index.ts:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue';
 2 | import Router from 'vue-router';
 3 | import Home from '../views/Home.vue';
 4 | import layout from '../views/layout/index.vue';
 5 | 
 6 | Vue.use(Router);
 7 | 
 8 | export default new Router({
 9 |   mode: 'hash',
10 |   base: process.env.BASE_URL,
11 |   routes: [
12 |     {
13 |       path: '/',
14 |       name: 'layout',
15 |       component: layout,
16 |       redirect:'/home',
17 |       children:[
18 |           {
19 |                 path: '/home',
20 |                 name: 'home',
21 |                 component:() => import('../views/index.vue')
22 |           },
23 |           {
24 |                 path: '/graphics',
25 |                 name: 'graphics',
26 |                 component:() => import('../views/graphics/index.vue')
27 |           },
28 |           {
29 |                 path: '/charts',
30 |                 name: 'charts',
31 |                 component:() => import('../views/charts/index.vue')
32 |           }
33 |       ]
34 |     },
35 |     {
36 |       path: '/about',
37 |       name: 'about',
38 |       component: () => import('../views/About.vue'),
39 |     },
40 |     {
41 |       path: '*',
42 |       component: () => import('../views/others/404.vue'),
43 |     }
44 |   ],
45 | });
46 | 


--------------------------------------------------------------------------------
/src/views/charts.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <svg width="500" height="270">
 3 |     <g style="transform: translate(0, 10px)">
 4 |       <path :d="line" />
 5 |     </g>
 6 |   </svg>
 7 | </template>
 8 | 
 9 | <script>
10 | import * as d3 from 'd3';
11 | export default {
12 |   name: 'vue-line-chart',
13 |   data() {
14 |     return {
15 |       data: [99, 71, 78, 25, 36, 92],
16 |       line: '',
17 |     };
18 |   },
19 |   mounted() {
20 |     this.calculatePath();
21 |   },
22 |   methods: {
23 |     getScales() {
24 |       const x = d3.scaleTime().range([0, 430]);
25 |       const y = d3.scaleLinear().range([210, 0]);
26 |       d3.axisLeft().scale(x);
27 |       d3.axisBottom().scale(y);
28 |       x.domain(d3.extent(this.data, (d, i) => i));
29 |       y.domain([0, d3.max(this.data, d => d)]);
30 |       return { x, y };
31 |     },
32 |     calculatePath() {
33 |       const scale = this.getScales();
34 |       const path = d3.line()
35 |         .x((d, i) => scale.x(i))
36 |         .y(d => scale.y(d));
37 |       this.line = path(this.data);
38 |     },
39 |   },
40 | };
41 | </script>
42 | <style lang="less" scoped>
43 | svg{
44 |  margin: 25px;
45 |  path{
46 |     fill: none ;
47 |     stroke: #76BF8A ;
48 |     stroke-width: 3px ;
49 |  }
50 | }
51 | </style>
52 | 
53 | 


--------------------------------------------------------------------------------
/src/views/charts/components/line.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <svg width="500" height="270">
 3 |     <g style="transform: translate(0, 10px)">
 4 |       <path :d="line" />
 5 |     </g>
 6 |   </svg>
 7 | </template>
 8 | 
 9 | <script>
10 | import * as d3 from 'd3';
11 | export default {
12 |   name: 'chart-line',
13 |   data() {
14 |     return {
15 |       data: [99, 71, 78, 25, 36, 92],
16 |       line: '',
17 |     };
18 |   },
19 |   mounted() {
20 |     this.calculatePath();
21 |   },
22 |   methods: {
23 |     getScales() {
24 |       const x = d3.scaleTime().range([0, 430]);
25 |       const y = d3.scaleLinear().range([210, 0]);
26 |       d3.axisLeft().scale(x);
27 |       d3.axisBottom().scale(y);
28 |       x.domain(d3.extent(this.data, (d, i) => i));
29 |       y.domain([0, d3.max(this.data, d => d)]);
30 |       return { x, y };
31 |     },
32 |     calculatePath() {
33 |       const scale = this.getScales();
34 |       const path = d3.line()
35 |         .x((d, i) => scale.x(i))
36 |         .y(d => scale.y(d));
37 |       this.line = path(this.data);
38 |     },
39 |   },
40 | };
41 | </script>
42 | <style lang="less" scoped>
43 | svg{
44 |  margin: 25px;
45 |  path{
46 |     fill: none ;
47 |     stroke: @primary-color ;
48 |     stroke-width: 3px ;
49 |  }
50 | }
51 | </style>
52 | 
53 | 


--------------------------------------------------------------------------------
/src/views/graphics/components/line.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <svg width="500" height="270">
 3 |     <g style="transform: translate(0, 10px)">
 4 |       <path :d="line" />
 5 |     </g>
 6 |   </svg>
 7 | </template>
 8 | 
 9 | <script>
10 | import * as d3 from 'd3';
11 | export default {
12 |   name: 'chart-line',
13 |   data() {
14 |     return {
15 |       data: [99, 71, 78, 25, 36, 92],
16 |       line: '',
17 |     };
18 |   },
19 |   mounted() {
20 |     this.calculatePath();
21 |   },
22 |   methods: {
23 |     getScales() {
24 |       const x = d3.scaleTime().range([0, 430]);
25 |       const y = d3.scaleLinear().range([210, 0]);
26 |       d3.axisLeft().scale(x);
27 |       d3.axisBottom().scale(y);
28 |       x.domain(d3.extent(this.data, (d, i) => i));
29 |       y.domain([0, d3.max(this.data, d => d)]);
30 |       return { x, y };
31 |     },
32 |     calculatePath() {
33 |       const scale = this.getScales();
34 |       const path = d3.line()
35 |         .x((d, i) => scale.x(i))
36 |         .y(d => scale.y(d));
37 |       this.line = path(this.data);
38 |     },
39 |   },
40 | };
41 | </script>
42 | <style lang="less" scoped>
43 | svg{
44 |  margin: 25px;
45 |  path{
46 |     fill: none ;
47 |     stroke: @primary-color ;
48 |     stroke-width: 3px ;
49 |  }
50 | }
51 | </style>
52 | 
53 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-d3",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build",
 8 |     "lint": "vue-cli-service lint",
 9 |     "test:e2e": "vue-cli-service test:e2e",
10 |     "test:unit": "vue-cli-service test:unit"
11 |   },
12 |   "dependencies": {
13 |     "@babel/polyfill": "^7.4.4",
14 |     "ant-design-vue": "^1.3.8",
15 |     "core-js": "^2.6.5",
16 |     "register-service-worker": "^1.6.2",
17 |     "transform-runtime": "0.0.0",
18 |     "vue": "^2.6.10",
19 |     "vue-class-component": "^7.0.2",
20 |     "vue-property-decorator": "^8.1.0",
21 |     "vue-router": "^3.0.3",
22 |     "vuex": "^3.0.1"
23 |   },
24 |   "devDependencies": {
25 |     "@types/chai": "^4.1.0",
26 |     "@types/mocha": "^5.2.4",
27 |     "@vue/cli-plugin-babel": "^3.7.0",
28 |     "@vue/cli-plugin-e2e-nightwatch": "^3.7.0",
29 |     "@vue/cli-plugin-pwa": "^3.7.0",
30 |     "@vue/cli-plugin-typescript": "^3.7.0",
31 |     "@vue/cli-plugin-unit-mocha": "^3.7.0",
32 |     "@vue/cli-service": "^3.7.0",
33 |     "@vue/test-utils": "1.0.0-beta.29",
34 |     "babel-plugin-transform-object-rest-spread": "^6.26.0",
35 |     "chai": "^4.1.2",
36 |     "d3": "^5.9.2",
37 |     "less": "^3.0.4",
38 |     "less-loader": "^4.1.0",
39 |     "typescript": "^3.4.3",
40 |     "vue-template-compiler": "^2.5.21"
41 |   }
42 | }
43 | 


--------------------------------------------------------------------------------
/src/components/HelloWorld.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="hello">
 3 |     <h1>{{ msg }}</h1>
 4 |     <p>
 5 |       For a guide and recipes on how to configure / customize this project,<br>
 6 |       check out the
 7 |       <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
 8 |     </p>
 9 |     <h3>Installed CLI Plugins</h3>
10 |     <ul>
11 |       <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
12 |       <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-typescript" target="_blank" rel="noopener">typescript</a></li>
13 |       <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa" target="_blank" rel="noopener">pwa</a></li>
14 |       <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-unit-mocha" target="_blank" rel="noopener">unit-mocha</a></li>
15 |       <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-e2e-nightwatch" target="_blank" rel="noopener">e2e-nightwatch</a></li>
16 |     </ul>
17 |     <h3>Essential Links</h3>
18 |     <ul>
19 |       <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
20 |       <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
21 |       <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
22 |       <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
23 |       <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
24 |     </ul>
25 |     <h3>Ecosystem</h3>
26 |     <ul>
27 |       <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
28 |       <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
29 |       <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
30 |       <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
31 |       <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
32 |     </ul>
33 |   </div>
34 | </template>
35 | 
36 | <script lang="ts">
37 | import { Component, Prop, Vue } from 'vue-property-decorator';
38 | 
39 | @Component
40 | export default class HelloWorld extends Vue {
41 |   @Prop() private msg!: string;
42 | }
43 | </script>
44 | 
45 | <!-- Add "scoped" attribute to limit CSS to this component only -->
46 | <style scoped lang="less">
47 | h3 {
48 |   margin: 40px 0 0;
49 | }
50 | ul {
51 |   list-style-type: none;
52 |   padding: 0;
53 | }
54 | li {
55 |   display: inline-block;
56 |   margin: 0 10px;
57 | }
58 | a {
59 |   color: #42b983;
60 | }
61 | </style>
62 | 


--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
 1 | // vue.config.js
 2 | module.exports = {
 3 |     publicPath: process.env.NODE_ENV === 'production' ? './' : '/',
 4 |     pages: {
 5 |         index: {
 6 |           // page 的入口
 7 |           entry: 'src/main.ts',
 8 |           // 模板来源
 9 |           template: 'public/index.html',
10 |           // 在 dist/index.html 的输出
11 |           filename: 'index.html',
12 |           // 当使用 title 选项时，
13 |           // template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
14 |           title: 'Index Page',
15 |           // 在这个页面中包含的块，默认情况下会包含
16 |           // 提取出来的通用 chunk 和 vendor chunk。
17 |           chunks: ['chunk-vendors', 'chunk-common', 'index']
18 |         },
19 |         // 当使用只有入口的字符串格式时，
20 |         // 模板会被推导为 `public/subpage.html`
21 |         // 并且如果找不到的话，就回退到 `public/index.html`。
22 |         // 输出文件名会被推导为 `subpage.html`。
23 |       },
24 |       //loader
25 |       css: {
26 |         loaderOptions: {
27 |           css: {
28 |             "style": true, 
29 |             // 这里的选项会传递给 css-loader
30 |           },
31 |           postcss: {
32 |             // 这里的选项会传递给 postcss-loader
33 |           },
34 |           less:{
35 |             modifyVars: {
36 |                 'primary-color':'#94c5f3',                         // 全局主色
37 |                 'link-color':' #1890ff',                            // 链接色
38 |                 'success-color':' #52c41a',                         // 成功色
39 |                 'warning-color':' #faad14',                         // 警告色
40 |                 'error-color':' #f5222d',                           // 错误色
41 |                 'font-size-base': '14px',                           // 主字号
42 |                 'heading-color': 'rgba(0, 0, 0, .85)',              // 标题色
43 |                 'text-color': 'rgba(0, 0, 0, .65)',                 // 主文本色
44 |                 'text-color-secondary' : 'rgba(0, 0, 0, .45)',      // 次文本色
45 |                 'disabled-color' : 'rgba(0, 0, 0, .25)',            // 失效色
46 |                 'border-radius-base': '4px',                        // 组件/浮层圆角
47 |                 'border-color-base':' #d9d9d9',                     // 边框色
48 |                 'box-shadow-base': '0 2px 8px rgba(0, 0, 0, .15)',  // 浮层阴影
49 |                 // dark theme
50 |                 // 'menu-dark-color': '#B9D5FA',
51 |                 'menu-dark-bg': '#B9D5FA',
52 |                 // 'menu-dark-arrow-color': 'fff',
53 |                 // 'menu-dark-submenu-bg':' #000c17',
54 |                 // 'menu-dark-highlight-color':' #fff',
55 |                 // 'menu-dark-item-active-bg': 'primary-color'
56 |             },
57 |             javascriptEnabled: true
58 |           }
59 |         }
60 |       },
61 |       pwa: {
62 |         iconPaths: {
63 |           favicon32: 'img/favicon.ico',
64 |           favicon16: 'img/favicon.ico',
65 |           appleTouchIcon: 'img/favicon.ico',
66 |           maskIcon: 'img/favicon.ico',
67 |           msTileImage: 'img/favicon.ico'
68 |         }
69 |       }
70 | 
71 |   }


--------------------------------------------------------------------------------
/src/views/layout/index.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <a-layout id="components-layout-demo-custom-trigger">
  3 |     <a-layout-sider
  4 |       :trigger="null"
  5 |       collapsible
  6 |       v-model="collapsed"
  7 |       style="overflow:auto;height:100vh;background:white;"
  8 |     >
  9 |       <div class="logo" >
 10 |            <a-input-search
 11 |             />
 12 |       </div>
 13 |       <a-menu  mode="inline" :defaultSelectedKeys="[route.name]" @click="clickMenu">
 14 |         <a-menu-item key="home">
 15 |             <a-icon type="home" /> 
 16 |             <span>首页</span>
 17 |         </a-menu-item>
 18 |         <a-sub-menu key="about">
 19 |             <span slot="title"><a-icon type="smile" /><span>基础</span></span>
 20 |             <a-menu-item key="graphics">基础图形</a-menu-item>
 21 |             <a-menu-item key="charts">基础表格</a-menu-item>
 22 |         </a-sub-menu>
 23 |       </a-menu>
 24 |     </a-layout-sider>
 25 |     <a-layout>
 26 |       <a-layout-header :style="{'background':' #fff', 'padding': 0,'position': 'fixed','display':'flex','justify-content':'space-between','width':collapsed ? 'calc(100% - 80px)' : 'calc(100% - 200px)'}">
 27 |         <a-icon
 28 |           class="trigger"
 29 |           :type="collapsed ? 'menu-unfold' : 'menu-fold'"
 30 |           @click="collapse"
 31 |         />
 32 |         <div class="logoImg">
 33 |             <span style="font-size:14px;font-weight:500;">Vue-D3: <span style="font-size:10px;font-weight:400;">如果真爱有颜色，那一定是雷姆蓝</span> </span>
 34 |             <img  src="https://cdn.calamus.xyz/leimu.jpeg" alt="">
 35 |         </div>
 36 |       </a-layout-header>
 37 |       <a-layout-content style="margin:70px 1rem 0 1rem">
 38 |         <a-breadcrumb  :style="{ background: '#fff','padding':'0.5rem 1rem' }">
 39 |             <a-breadcrumb-item href="text">
 40 |                 <a-icon type="home" />
 41 |                 <span>首页</span>
 42 |             </a-breadcrumb-item>
 43 |             <a-breadcrumb-item>
 44 |                 {{this.$route.name}}
 45 |             </a-breadcrumb-item>
 46 |         </a-breadcrumb>
 47 |         <div :style="{ background: '#fff','margin-top':'6px','padding':'0.5rem 0 0.5rem 1rem','min-height':'calc(100% - 80px)'}">
 48 |             <router-view />
 49 |         </div>
 50 |         <footer style="text-align:center;padding:0.5rem">© 2016-2019 <a href="//calamus.xyz" target="_blank">Calamus</a> </footer>
 51 |       </a-layout-content>
 52 |     </a-layout>
 53 |   </a-layout>
 54 | </template>
 55 | 
 56 | <script>
 57 | import { Component, Vue } from 'vue-property-decorator';
 58 | 
 59 | export default {
 60 |   data(){
 61 |     return {
 62 |       collapsed: false,
 63 |       route: this.$route
 64 |     }
 65 |   },
 66 |   mounted() {
 67 |       console.log("route",this.$route)
 68 |   },
 69 |   methods: {
 70 |         collapse() {
 71 |             this.collapsed = !this.collapsed ;
 72 |         },
 73 |         clickMenu({item, key, keyPath }) {
 74 |             this.$router.push({path:key}) ;
 75 |         },
 76 |         selectMenu({item, key, selectedKeys}) {
 77 |             console.log("select",item, key, selectedKeys)
 78 |         }
 79 |   }
 80 | }
 81 | </script>
 82 | 
 83 | <style lang="less" scoped>
 84 | @keyframes jello {
 85 | 
 86 |     from,
 87 |     11.1%,
 88 |     to {
 89 |         transform: translate3d(0, 0, 0);
 90 |     }
 91 | 
 92 |     22.2% {
 93 |         transform: skewX(-12.5deg) skewY(-12.5deg);
 94 |     }
 95 | 
 96 |     33.3% {
 97 |         transform: skewX(6.25deg) skewY(6.25deg);
 98 |     }
 99 | 
100 |     44.4% {
101 |         transform: skewX(-3.125deg) skewY(-3.125deg);
102 |     }
103 | 
104 |     55.5% {
105 |         transform: skewX(1.5625deg) skewY(1.5625deg);
106 |     }
107 | 
108 |     66.6% {
109 |         transform: skewX(-0.78125deg) skewY(-0.78125deg);
110 |     }
111 | 
112 |     77.7% {
113 |         transform: skewX(0.390625deg) skewY(0.390625deg);
114 |     }
115 | 
116 |     88.8% {
117 |         transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
118 |     }
119 | }
120 | 
121 | @keyframes textConcatInDown {
122 |     0% {
123 |         letter-spacing: 1em;
124 |         transform: translateZ(400px) translateY(300px);
125 |         opacity: 0;
126 |     }
127 | 
128 |     40% {
129 |         opacity: 0.6;
130 |     }
131 | 
132 |     100% {
133 |         transform: translateZ(0) translateY(0);
134 |         opacity: 1;
135 |     }
136 | }
137 | 
138 | #components-layout-demo-custom-trigger{
139 |     height:100%;
140 | }
141 | #components-layout-demo-custom-trigger .trigger {
142 |   font-size: 18px;
143 |   line-height: 64px;
144 |   padding: 0 24px;
145 |   cursor: pointer;
146 |   transition: color .3s;
147 |   color:#94c5f3;
148 | }
149 | 
150 | #components-layout-demo-custom-trigger .trigger:hover {
151 |   color: #1890ff;
152 | }
153 | 
154 | #components-layout-demo-custom-trigger .logo {
155 |   height: 32px;
156 |   background: #B9D5FA !important;
157 |   margin: 16px;
158 | }
159 | .logoImg{
160 |     span{
161 |         color: @primary-color ;
162 |         padding-right:1rem;
163 |         animation: textConcatInDown 1000ms both;
164 |     }
165 |     img{
166 |         margin-right:3rem;
167 |         height:60px ;
168 |         border-radius:50%;
169 |         &:hover{
170 |             animation: jello 1000ms both
171 |         }
172 |     }
173 | }
174 | </style>
175 | 
176 | 


--------------------------------------------------------------------------------
/src/views/charts/components/relation.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div id="relation" class="container">
  3 |       1111
  4 |   </div>
  5 | </template>
  6 |  
  7 | <script>
  8 |   //  import vis from 'vis'
  9 |   import * as d3 from 'd3'
 10 |  
 11 |   export default {
 12 |     name: 'chart-relation',
 13 |     data () {
 14 |       return {
 15 |         relation: {},
 16 |         cname: '',
 17 |       }
 18 |     },
 19 |     methods: {
 20 |       jsBack () {
 21 | //        返回按钮
 22 |         var u = navigator.userAgent
 23 |         var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1
 24 |         var isiOS = u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/) //ios终端
 25 |         if (isAndroid) {
 26 | //          Android端
 27 |           window.android.back()
 28 |         } else if (isiOS) {
 29 | //          ios端
 30 |         }
 31 |       },
 32 |       showd3 () {
 33 | //        获取body高度和宽度
 34 |         let height = document.body.clientHeight
 35 |         let width = document.body.clientWidth
 36 |  
 37 |         //移动端设备横竖屏重新加载页面
 38 |         function change () {
 39 |           window.location.reload()
 40 |         }
 41 |  
 42 |         window.addEventListener('onorientationchange' in window ? 'orientationchange' : 'resize', change, false)
 43 | //        节点大小（圆圈大小）
 44 |         const nodeSize = 35
 45 | //        初始化时连接线的距离长度
 46 |         const linkDistance = 130
 47 | //        赋值数据集
 48 |         var nodes = this.relation.nodes
 49 |         var links = this.relation.links
 50 | //      设置画布，获取id为relation的对象，添加svg，这里的图像用了svg，意为可缩放矢量图形，它与其他图片格式相比较，svg更加小，因为是矢量图，放大不会失帧。具体可以自行百度svg相关知识
 51 |         var svg = d3.select('#relation').append('svg')
 52 |           .attr('xmlns', 'http://www.w3.org/2000/svg')
 53 |           .attr('version', '2.0')
 54 |           .attr('class', 'svg')//给svg设置了一个class样式，主要作用是长宽设置为100%
 55 | //        设置力布局，使用d3 v4版本的力导向布局
 56 |         var force = d3.forceSimulation()
 57 |           .force('center', d3.forceCenter(width / 2, height / 2))//设置力导向布局的中心点，创建一个力中心，设置为画布长宽的一半，所以拓扑图会在画布的中心点
 58 |           .force('charce', d3.forceManyBody().strength(-70))//节点间的作用力，如果不设置.strength(-60）的话，默认是-30
 59 |           .force('collide', d3.forceCollide())//使用默认的半径创建一个碰撞作用力。radius默认所有的节点都为1
 60 |  
 61 | //        设置缩放
 62 | //        svg下嵌套g标签，缩放都在g标签上进行
 63 |         var g = svg.append('g')
 64 | //        d3.zoom是设置缩放，pc端是滚轮进行缩放，在移动端可以通过两指进行缩放
 65 |         var zoomObj = d3.zoom()
 66 |           .scaleExtent([0.5, 1.2]) // 设置缩放范围
 67 |           .on('zoom', () => {
 68 |             //监听zoom事件，zoom发生时，调用该方法
 69 |             const transform = d3.event.transform //获取缩放和偏移的数据，不懂得同学可以自行通过console.log(d3.event.transform)滑动滚轮查看数据变化
 70 |             g.attr('transform', transform)   // 设置缩放和偏移量 transform对象自带toString()方法
 71 |           })
 72 |           .on('end', () => {
 73 | //            该方法在缩放时间结束后回调
 74 |             // code
 75 |           })
 76 |         svg.call(zoomObj)
 77 | //        绘制箭头
 78 |         //箭头
 79 |         // eslint-disable-next-line no-unused-vars
 80 |         var markerBlue =
 81 |           g.append('marker')
 82 |             .attr('id', 'resolvedBlue')
 83 |             //.attr("markerUnits","strokeWidth")//设置为strokeWidth箭头会随着线的粗细发生变化
 84 |             .attr('markerUnits', 'userSpaceOnUse')//用于确定marker是否进行缩放。取值strokeWidth和userSpaceOnUse，
 85 |             .attr('viewBox', '0 -5 10 10')//坐标系的区域
 86 |             .attr('refX', 39)//箭头坐标
 87 |             .attr('refY', 0)
 88 |             .attr('markerWidth', 12)//标识的大小
 89 |             .attr('markerHeight', 12)
 90 |             .attr('orient', 'auto')//绘制方向，可设定为：auto（自动确认方向）和 角度值
 91 |             .attr('stroke-width', 2)//箭头宽度
 92 |             .append('path')
 93 |             .attr('d', 'M0,-5L10,0L0,5')//箭头的路径
 94 |             .attr('fill', '#029ed9')//箭头颜色
 95 |         // eslint-disable-next-line no-unused-vars
 96 |         var markerRed =
 97 |           g.append('marker')
 98 |             .attr('id', 'resolvedRed')
 99 |             //.attr("markerUnits","strokeWidth")//设置为strokeWidth箭头会随着线的粗细发生变化
100 |             .attr('markerUnits', 'userSpaceOnUse')//用于确定marker是否进行缩放。取值strokeWidth和userSpaceOnUse，
101 |             .attr('viewBox', '0 -5 10 10')//坐标系的区域
102 |             .attr('refX', 39)//箭头坐标
103 |             .attr('refY', 0)
104 |             .attr('markerWidth', 12)//标识的大小
105 |             .attr('markerHeight', 12)
106 |             .attr('orient', 'auto')//绘制方向，可设定为：auto（自动确认方向）和 角度值
107 |             .attr('stroke-width', 2)//箭头宽度
108 |             .append('path')
109 |             .attr('d', 'M0,-5L10,0L0,5')//箭头的路径
110 |             .attr('fill', '#ff4238')//箭头颜色
111 |  
112 | //        设置连线
113 |         var edgesLine = g.selectAll('line')
114 |           .data(links)
115 |           .enter()
116 |           .append('path')
117 |           .attr('class', 'edgelabel')//添加class样式
118 |           .attr('class', (d, i) => {
119 |             if (d.relation === '投资') {
120 |               return 'nodeBlue'
121 |             } else if (d.relation === '股东') {
122 |               return 'nodeRed'
123 |             }
124 |           })//添加颜色
125 |           .style('stroke-width', 1)//连接线粗细度
126 |           .attr('marker-end', (d, i) => {
127 |             if (d.relation === '投资') {
128 |               return 'url(#resolvedBlue)'
129 |             } else if (d.relation === '股东') {
130 |               return 'url(#resolvedRed)'
131 |             }
132 |           })
133 |         //设置线的末尾为刚刚的箭头
134 | //        设置连接线中间关系文本
135 |         var edgesText = g.selectAll('.linetext')
136 |           .data(links)
137 |           .enter()
138 |           .append('text')
139 |           .attr('class', (d, i) => {
140 |             if (d.relation === '投资') {
141 |               return 'linetextBlue'
142 |             } else if (d.relation === '股东' || d.relation === '分支机构') {
143 |               return 'linetextRed'
144 |             }
145 |           })
146 |           .text((d) => {
147 | //          设置关系文本
148 |             return d.relation
149 |           })
150 | //        设置拖拽
151 |         var drag = d3.drag()
152 |           .on('start', (d, i) => {
153 |             if (!d3.event.active) {
154 | //              拖拽开始回调
155 |               force.alphaTarget(0.1).restart() // 这个方法可以用在在交互时重新启动仿真，比如拖拽了某个节点，重新进行布局。这个必须要进行设置不然会拖动不了。
156 |             }
157 |             d.fixed = true //偏移后固定不动
158 | //            d3.event.sourceEvent.stopPropagation()
159 |             d.fx = d.x//记录当前默认位置（x - 节点当前的 x-位置，如果要为某个节点设置默认的位置，则需要为该节点设置如下两个属性:fx =x位置）
160 |             d.fy = d.y
161 |           })
162 |           .on('drag', (d, i) => {
163 | //            拖动时，设置拖动后默认位置的x，y
164 |             d.fx = d3.event.x
165 |             d.fy = d3.event.y
166 |           })
167 |           .on('end', (d, i) => {
168 | //            拖动结束后
169 |             if (!d3.event.active) {
170 |               force.alphaTarget(0)
171 |             }
172 |           })
173 |         // eslint-disable-next-line no-unused-vars
174 |         var nodeGroup = g.selectAll('g').data(nodes)
175 |           .enter()
176 |           .append('g')
177 |           .attr('id', function (d, i) {
178 |             return 'nodeGroup' + i
179 |           })
180 |           .each(function (d, i) {
181 |             var self = this
182 |             d3.select(this)
183 |               .append('circle')
184 |               .attr('r', nodeSize)
185 |               .attr('class', (d, i) => {
186 | //            为不同的节点设置不同的css样式
187 |                 if (d.type === 0) {
188 |                   return 'nodeOrange'
189 |                 } else if (d.type === 1) {
190 |                   return 'nodeBlue'
191 |                 } else if (d.type === 2) {
192 |                   return 'nodeRed'
193 |                 }
194 |               })
195 |               .attr('id', (d, i) => {
196 | //            为每个节点设置不同的id
197 |                 return 'node' + i
198 |               })
199 |               .on('touchmove', (d, i) => {
200 | //            设置鼠标监听时间，当移动端手指移动时,设置关系文本透明度
201 |                 edgesText.style('fill-opacity', function (edge) {
202 |                   if (edge.source === d || edge.target === d) {
203 |                     return 1.0
204 |                   } else {
205 |                     return 0
206 |                   }
207 |                 })
208 |                 /**
209 |                  * 改本svg的层级，这个主要是因为在svg中z-index是无效的，svg根据绘制的先后顺序，后绘制的排在最上面，就像贴纸，
210 |                  * 后贴的会盖住前面贴的。所以我们希望在被选中时，能够把节点和节点对应的文字提到最上一层，我们就可以通过d3来选择到点击的对象，然后通过raise方法来提到最上一层
211 |                  * 下同
212 |                  */
213 |                 d3.select(self).raise()
214 |               })
215 |               .on('touchend', (d, i) => {
216 | //            手指移开后，所有关系文本设置透明度为1
217 |                 edgesText.style('fill-opacity', function (edge) {
218 |                   return 1.0
219 |                 })
220 |               })
221 |               .on('mousedown', (d, i) => {
222 |                 edgesText.style('fill-opacity', function (edge) {
223 |                   if (edge.source === d || edge.target === d) {
224 |                     return 1.0
225 |                   } else {
226 |                     return 0
227 |                   }
228 |                 })
229 |                 d3.select(self).raise()
230 |               })
231 |               .on('mouseout', (d, i) => {
232 |                 edgesText.attr('fill-opacity', function (edge) {
233 |                   return 1
234 |                 })
235 |               })
236 |               .call(drag)//监听拖动事件
237 |             d3.select(this)
238 |               .append('text')
239 |               .attr('text-anchor', 'middle')
240 |               .attr('class', 'nodetext')
241 |               .attr('id', (d, i) => {
242 |                 return 'nodetext' + i
243 |               })
244 |               .attr('x', function (d, i) {
245 |                 /**
246 |                  * 由于svg的text不能进行换行，所以下面文字使用了tspan进行换行操作
247 |                  */
248 |                   //正则表达式
249 |                 var reEn = /[a-zA-Z]+/g
250 |                 //如果全英文则不换行
251 |                 if (d.name.match(reEn)) {
252 |                   d3.select(this).append('tspan')
253 |                     .attr('class', 'nodetext')
254 |                     .attr('fill', '#ff7438')
255 |                     .text(function () { return d.name })
256 |                 } else if (d.name.length <= 4) {
257 |                   //文中小于4个字不换行
258 |                   d3.select(this).append('tspan')
259 |                     .attr('class', 'nodetext')
260 |                     .attr('fill', '#ff7438')
261 |                     .text(function () { return d.name })
262 |                 } else {
263 |                   if (d.name.length <= 8) {
264 |                     //中文小于八个字，则分段进行换行
265 |                     let top = d.name.substring(0, 4)
266 |                     let bot = d.name.substring(4, 8)
267 |                     //这里的this指代text dom，不懂的可以自行打印this查看
268 |                     d3.select(this).append('tspan')
269 |                       .text(function () { return top })
270 |                     d3.select(this).append('tspan')
271 |                       .attr('dy', '1.2em')//设置偏移
272 |                       .text(function () { return bot })
273 |                   } else {
274 |                     //中文大于8个字，分段并用...代替后面的字符
275 |                     let top = d.name.substring(0, 4)
276 |                     let bot = d.name.substring(4, 7) + '...'
277 |                     d3.select(this).append('tspan')
278 |                       .text(function () { return top })
279 |                     d3.select(this).append('tspan')
280 |                       .attr('dy', '1.2em')
281 |                       .text(function () { return bot })
282 |                   }
283 |                 }
284 |               })
285 |               .attr('cursor', 'default')//设置鼠标样式
286 |               .on('touchmove', (d, i) => {
287 |                 edgesText.style('fill-opacity', function (edge) {
288 |                   if (edge.source === d || edge.target === d) {
289 |                     return 1.0
290 |                   } else {
291 |                     return 0
292 |                   }
293 |                 })
294 |                 //改本svg的层级
295 |                 d3.select(self).raise()
296 |               })
297 |               .on('touchend', (d, i) => {
298 |                 edgesText.style('fill-opacity', function (edge) {
299 |                   return 1.0
300 |                 })
301 |               })
302 |               .on('mousedown', (d, i) => {
303 |                 edgesText.style('fill-opacity', function (edge) {
304 |                   if (edge.source === d || edge.target === d) {
305 |                     return 1.0
306 |                   } else {
307 |                     return 0
308 |                   }
309 |                 })
310 |                 d3.select(self).raise()
311 |               })
312 |               .on('mouseout', (d, i) => {
313 |                 edgesText.style('fill-opacity', function (edge) {
314 |                   return 1.0
315 |                 })
316 |               })
317 |               .call(drag)
318 |           })
319 |  
320 | //        设置node和edge
321 |         force.nodes(nodes)
322 |           .force('link', d3.forceLink(links).distance(linkDistance).strength(0.1))
323 |           .restart()
324 | //        tick 表示当运动进行中每更新一帧时
325 |         force.on('tick', function () {
326 | //          //更新连接线的位置
327 |           edgesLine.attr('d', function (d) {
328 |             var path = 'M ' + d.source.x + ' ' + d.source.y + ' L ' + d.target.x + ' ' + d.target.y
329 |             return path
330 |           })
331 |  
332 |           //更新连接线上文字的位置
333 |           edgesText.attr('x', function (d) {
334 |             return (d.source.x + d.target.x) / 2
335 |           })
336 |           edgesText.attr('y', function (d) { return (d.source.y + d.target.y) / 2 })
337 |  
338 |           //更新结点和文字
339 |           d3.selectAll('circle').attr('cx', function (d) {
340 |             return d.x
341 |           })
342 |           d3.selectAll('circle').attr('cy', function (d) { return d.y })
343 |           d3.selectAll('.nodetext').attr('x', function (d) { return d.x })
344 |           d3.selectAll('.nodetext').attr('y', function (d) { return d.y })
345 |           //动态更新sptan 的x的坐标
346 |           d3.selectAll('.nodetext').selectAll('tspan')
347 |             .attr('x', function (d) {
348 |               return d.x
349 |             })
350 |         })
351 |       }
352 |     },
353 |     created () {
354 |       this.$nextTick(() => {
355 |         this.relation = JSON.parse('{"nodes":[{"name":"vicky","type":0},{"name":"海南荣恒投资控股有限公司","type":1},{"name":"长白山保护开发区恒力建设有限公司","type":1},{"name":"海宁市恒立房地产开发有限公司","type":1},{"name":"湖州白领氏房地产开发有限公司","type":1},{"name":"左建平","type":2},{"name":"恒力建设集团","type":2},{"name":"张金良","type":2},{"name":"林德仙","type":2},{"name":"钟李彬","type":2},{"name":"黄萍","type":2},{"name":"冯培华","type":2},{"name":"张乐英","type":2},{"name":"董志坚","type":2},{"name":"凌勇","type":2},{"name":"钟云锋","type":2},{"name":"翟鑫森","type":2},{"name":"糜妙娟","type":2}],"links":[{"source":0,"target":1,"relation":"投资"},{"source":0,"target":2,"relation":"投资"},{"source":0,"target":3,"relation":"投资"},{"source":0,"target":4,"relation":"投资"},{"source":5,"target":0,"relation":"股东"},{"source":6,"target":0,"relation":"股东"},{"source":7,"target":0,"relation":"股东"},{"source":8,"target":0,"relation":"股东"},{"source":9,"target":0,"relation":"股东"},{"source":10,"target":0,"relation":"股东"},{"source":11,"target":0,"relation":"股东"},{"source":12,"target":0,"relation":"股东"},{"source":13,"target":0,"relation":"股东"},{"source":14,"target":0,"relation":"股东"},{"source":15,"target":0,"relation":"股东"},{"source":16,"target":0,"relation":"股东"},{"source":17,"target":0,"relation":"股东"}],"code":200,"message":"请求成功"}')
356 |         console.log("1111",this.relation)
357 |         this.showd3()
358 |       })
359 |     }
360 |   }
361 | </script>
362 |  
363 | <style lang="less" rel="stylesheet/stylus">
364 |   .container{
365 |       height:500px ;
366 |       width:500px;
367 |         .exit{
368 |             position:absolute ;
369 |             top:20px ;
370 |             left:20px;
371 |             width:60px;
372 |             height:25px;
373 |             background: #0583f2;
374 |             border: none;
375 |             border-radius: 2px;
376 |             color: #fff;
377 |             z-index: 200;
378 |             &:hover{
379 |                 background: #1e82d9;
380 |             }
381 |         }
382 |   .labeltext{
383 |         font-size: 16px;
384 |         font-family: SimSun;
385 |         fill: #ff7438;
386 |     }
387 |  
388 |   .nodetext{
389 |     font-size: 12px;
390 |     font-family: SimSun;
391 |     fill: #fff;
392 |     position:relative
393 |   }
394 |  
395 |   .linetextRed{ 
396 |     font-size: 12px ;
397 |     font-weight: bold;
398 |     font-family: SimSun;
399 |     fill: #ff4238 !important;
400 |     color: #ff4238;
401 |     fill-opacity: 1.0 ;
402 |   }
403 |  
404 |   .linetextBlue{
405 |     font-size: 12px ;
406 |     font-weight: bold ;
407 |     font-family: SimSun ;
408 |     fill: #029ed9 !important ;
409 |     color: #029ed9 ;
410 |     fill-opacity: 1.0 ;
411 |   }
412 | 
413 |  
414 |   .svg{
415 |     position: relative;
416 |     width: 100%;
417 |     height: 100%;
418 |   }
419 | 
420 |  
421 |   .edgepath{
422 |     pointer-events: none;
423 |     stroke-width: 0.5px;
424 |   }
425 | 
426 |  
427 |   .nodeOrange{
428 |     position: relative;
429 |     fill: #ff7438 !important;
430 |     stroke: #ff7438 ;
431 |   }
432 | 
433 |  
434 |   .nodeRed{
435 |     position: relative;
436 |     fill: #ff4238 !important;
437 |     stroke: #ff4238;
438 |   }
439 | 
440 |  
441 |   .nodeBlue{
442 |     position: relative ;
443 |     fill: #029ed9 !important ;
444 |     stroke: #029ed9;
445 |   }
446 | 
447 | 
448 |   }
449 |     
450 | </style>


--------------------------------------------------------------------------------
/src/views/graphics/components/relation.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div id="relation" class="container">
  3 |       1111
  4 |   </div>
  5 | </template>
  6 |  
  7 | <script>
  8 |   //  import vis from 'vis'
  9 |   import * as d3 from 'd3'
 10 |  
 11 |   export default {
 12 |     name: 'chart-relation',
 13 |     data () {
 14 |       return {
 15 |         relation: {},
 16 |         cname: '',
 17 |       }
 18 |     },
 19 |     methods: {
 20 |       jsBack () {
 21 | //        返回按钮
 22 |         var u = navigator.userAgent
 23 |         var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1
 24 |         var isiOS = u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/) //ios终端
 25 |         if (isAndroid) {
 26 | //          Android端
 27 |           window.android.back()
 28 |         } else if (isiOS) {
 29 | //          ios端
 30 |         }
 31 |       },
 32 |       showd3 () {
 33 | //        获取body高度和宽度
 34 |         let height = document.body.clientHeight
 35 |         let width = document.body.clientWidth
 36 |  
 37 |         //移动端设备横竖屏重新加载页面
 38 |         function change () {
 39 |           window.location.reload()
 40 |         }
 41 |  
 42 |         window.addEventListener('onorientationchange' in window ? 'orientationchange' : 'resize', change, false)
 43 | //        节点大小（圆圈大小）
 44 |         const nodeSize = 35
 45 | //        初始化时连接线的距离长度
 46 |         const linkDistance = 130
 47 | //        赋值数据集
 48 |         var nodes = this.relation.nodes
 49 |         var links = this.relation.links
 50 | //      设置画布，获取id为relation的对象，添加svg，这里的图像用了svg，意为可缩放矢量图形，它与其他图片格式相比较，svg更加小，因为是矢量图，放大不会失帧。具体可以自行百度svg相关知识
 51 |         var svg = d3.select('#relation').append('svg')
 52 |           .attr('xmlns', 'http://www.w3.org/2000/svg')
 53 |           .attr('version', '2.0')
 54 |           .attr('class', 'svg')//给svg设置了一个class样式，主要作用是长宽设置为100%
 55 | //        设置力布局，使用d3 v4版本的力导向布局
 56 |         var force = d3.forceSimulation()
 57 |           .force('center', d3.forceCenter(width / 2, height / 2))//设置力导向布局的中心点，创建一个力中心，设置为画布长宽的一半，所以拓扑图会在画布的中心点
 58 |           .force('charce', d3.forceManyBody().strength(-70))//节点间的作用力，如果不设置.strength(-60）的话，默认是-30
 59 |           .force('collide', d3.forceCollide())//使用默认的半径创建一个碰撞作用力。radius默认所有的节点都为1
 60 |  
 61 | //        设置缩放
 62 | //        svg下嵌套g标签，缩放都在g标签上进行
 63 |         var g = svg.append('g')
 64 | //        d3.zoom是设置缩放，pc端是滚轮进行缩放，在移动端可以通过两指进行缩放
 65 |         var zoomObj = d3.zoom()
 66 |           .scaleExtent([0.5, 1.2]) // 设置缩放范围
 67 |           .on('zoom', () => {
 68 |             //监听zoom事件，zoom发生时，调用该方法
 69 |             const transform = d3.event.transform //获取缩放和偏移的数据，不懂得同学可以自行通过console.log(d3.event.transform)滑动滚轮查看数据变化
 70 |             g.attr('transform', transform)   // 设置缩放和偏移量 transform对象自带toString()方法
 71 |           })
 72 |           .on('end', () => {
 73 | //            该方法在缩放时间结束后回调
 74 |             // code
 75 |           })
 76 |         svg.call(zoomObj)
 77 | //        绘制箭头
 78 |         //箭头
 79 |         // eslint-disable-next-line no-unused-vars
 80 |         var markerBlue =
 81 |           g.append('marker')
 82 |             .attr('id', 'resolvedBlue')
 83 |             //.attr("markerUnits","strokeWidth")//设置为strokeWidth箭头会随着线的粗细发生变化
 84 |             .attr('markerUnits', 'userSpaceOnUse')//用于确定marker是否进行缩放。取值strokeWidth和userSpaceOnUse，
 85 |             .attr('viewBox', '0 -5 10 10')//坐标系的区域
 86 |             .attr('refX', 39)//箭头坐标
 87 |             .attr('refY', 0)
 88 |             .attr('markerWidth', 12)//标识的大小
 89 |             .attr('markerHeight', 12)
 90 |             .attr('orient', 'auto')//绘制方向，可设定为：auto（自动确认方向）和 角度值
 91 |             .attr('stroke-width', 2)//箭头宽度
 92 |             .append('path')
 93 |             .attr('d', 'M0,-5L10,0L0,5')//箭头的路径
 94 |             .attr('fill', '#029ed9')//箭头颜色
 95 |         // eslint-disable-next-line no-unused-vars
 96 |         var markerRed =
 97 |           g.append('marker')
 98 |             .attr('id', 'resolvedRed')
 99 |             //.attr("markerUnits","strokeWidth")//设置为strokeWidth箭头会随着线的粗细发生变化
100 |             .attr('markerUnits', 'userSpaceOnUse')//用于确定marker是否进行缩放。取值strokeWidth和userSpaceOnUse，
101 |             .attr('viewBox', '0 -5 10 10')//坐标系的区域
102 |             .attr('refX', 39)//箭头坐标
103 |             .attr('refY', 0)
104 |             .attr('markerWidth', 12)//标识的大小
105 |             .attr('markerHeight', 12)
106 |             .attr('orient', 'auto')//绘制方向，可设定为：auto（自动确认方向）和 角度值
107 |             .attr('stroke-width', 2)//箭头宽度
108 |             .append('path')
109 |             .attr('d', 'M0,-5L10,0L0,5')//箭头的路径
110 |             .attr('fill', '#ff4238')//箭头颜色
111 |  
112 | //        设置连线
113 |         var edgesLine = g.selectAll('line')
114 |           .data(links)
115 |           .enter()
116 |           .append('path')
117 |           .attr('class', 'edgelabel')//添加class样式
118 |           .attr('class', (d, i) => {
119 |             if (d.relation === '投资') {
120 |               return 'nodeBlue'
121 |             } else if (d.relation === '股东') {
122 |               return 'nodeRed'
123 |             }
124 |           })//添加颜色
125 |           .style('stroke-width', 1)//连接线粗细度
126 |           .attr('marker-end', (d, i) => {
127 |             if (d.relation === '投资') {
128 |               return 'url(#resolvedBlue)'
129 |             } else if (d.relation === '股东') {
130 |               return 'url(#resolvedRed)'
131 |             }
132 |           })
133 |         //设置线的末尾为刚刚的箭头
134 | //        设置连接线中间关系文本
135 |         var edgesText = g.selectAll('.linetext')
136 |           .data(links)
137 |           .enter()
138 |           .append('text')
139 |           .attr('class', (d, i) => {
140 |             if (d.relation === '投资') {
141 |               return 'linetextBlue'
142 |             } else if (d.relation === '股东' || d.relation === '分支机构') {
143 |               return 'linetextRed'
144 |             }
145 |           })
146 |           .text((d) => {
147 | //          设置关系文本
148 |             return d.relation
149 |           })
150 | //        设置拖拽
151 |         var drag = d3.drag()
152 |           .on('start', (d, i) => {
153 |             if (!d3.event.active) {
154 | //              拖拽开始回调
155 |               force.alphaTarget(0.1).restart() // 这个方法可以用在在交互时重新启动仿真，比如拖拽了某个节点，重新进行布局。这个必须要进行设置不然会拖动不了。
156 |             }
157 |             d.fixed = true //偏移后固定不动
158 | //            d3.event.sourceEvent.stopPropagation()
159 |             d.fx = d.x//记录当前默认位置（x - 节点当前的 x-位置，如果要为某个节点设置默认的位置，则需要为该节点设置如下两个属性:fx =x位置）
160 |             d.fy = d.y
161 |           })
162 |           .on('drag', (d, i) => {
163 | //            拖动时，设置拖动后默认位置的x，y
164 |             d.fx = d3.event.x
165 |             d.fy = d3.event.y
166 |           })
167 |           .on('end', (d, i) => {
168 | //            拖动结束后
169 |             if (!d3.event.active) {
170 |               force.alphaTarget(0)
171 |             }
172 |           })
173 |         // eslint-disable-next-line no-unused-vars
174 |         var nodeGroup = g.selectAll('g').data(nodes)
175 |           .enter()
176 |           .append('g')
177 |           .attr('id', function (d, i) {
178 |             return 'nodeGroup' + i
179 |           })
180 |           .each(function (d, i) {
181 |             var self = this
182 |             d3.select(this)
183 |               .append('circle')
184 |               .attr('r', nodeSize)
185 |               .attr('class', (d, i) => {
186 | //            为不同的节点设置不同的css样式
187 |                 if (d.type === 0) {
188 |                   return 'nodeOrange'
189 |                 } else if (d.type === 1) {
190 |                   return 'nodeBlue'
191 |                 } else if (d.type === 2) {
192 |                   return 'nodeRed'
193 |                 }
194 |               })
195 |               .attr('id', (d, i) => {
196 | //            为每个节点设置不同的id
197 |                 return 'node' + i
198 |               })
199 |               .on('touchmove', (d, i) => {
200 | //            设置鼠标监听时间，当移动端手指移动时,设置关系文本透明度
201 |                 edgesText.style('fill-opacity', function (edge) {
202 |                   if (edge.source === d || edge.target === d) {
203 |                     return 1.0
204 |                   } else {
205 |                     return 0
206 |                   }
207 |                 })
208 |                 /**
209 |                  * 改本svg的层级，这个主要是因为在svg中z-index是无效的，svg根据绘制的先后顺序，后绘制的排在最上面，就像贴纸，
210 |                  * 后贴的会盖住前面贴的。所以我们希望在被选中时，能够把节点和节点对应的文字提到最上一层，我们就可以通过d3来选择到点击的对象，然后通过raise方法来提到最上一层
211 |                  * 下同
212 |                  */
213 |                 d3.select(self).raise()
214 |               })
215 |               .on('touchend', (d, i) => {
216 | //            手指移开后，所有关系文本设置透明度为1
217 |                 edgesText.style('fill-opacity', function (edge) {
218 |                   return 1.0
219 |                 })
220 |               })
221 |               .on('mousedown', (d, i) => {
222 |                 edgesText.style('fill-opacity', function (edge) {
223 |                   if (edge.source === d || edge.target === d) {
224 |                     return 1.0
225 |                   } else {
226 |                     return 0
227 |                   }
228 |                 })
229 |                 d3.select(self).raise()
230 |               })
231 |               .on('mouseout', (d, i) => {
232 |                 edgesText.attr('fill-opacity', function (edge) {
233 |                   return 1
234 |                 })
235 |               })
236 |               .call(drag)//监听拖动事件
237 |             d3.select(this)
238 |               .append('text')
239 |               .attr('text-anchor', 'middle')
240 |               .attr('class', 'nodetext')
241 |               .attr('id', (d, i) => {
242 |                 return 'nodetext' + i
243 |               })
244 |               .attr('x', function (d, i) {
245 |                 /**
246 |                  * 由于svg的text不能进行换行，所以下面文字使用了tspan进行换行操作
247 |                  */
248 |                   //正则表达式
249 |                 var reEn = /[a-zA-Z]+/g
250 |                 //如果全英文则不换行
251 |                 if (d.name.match(reEn)) {
252 |                   d3.select(this).append('tspan')
253 |                     .attr('class', 'nodetext')
254 |                     .attr('fill', '#ff7438')
255 |                     .text(function () { return d.name })
256 |                 } else if (d.name.length <= 4) {
257 |                   //文中小于4个字不换行
258 |                   d3.select(this).append('tspan')
259 |                     .attr('class', 'nodetext')
260 |                     .attr('fill', '#ff7438')
261 |                     .text(function () { return d.name })
262 |                 } else {
263 |                   if (d.name.length <= 8) {
264 |                     //中文小于八个字，则分段进行换行
265 |                     let top = d.name.substring(0, 4)
266 |                     let bot = d.name.substring(4, 8)
267 |                     //这里的this指代text dom，不懂的可以自行打印this查看
268 |                     d3.select(this).append('tspan')
269 |                       .text(function () { return top })
270 |                     d3.select(this).append('tspan')
271 |                       .attr('dy', '1.2em')//设置偏移
272 |                       .text(function () { return bot })
273 |                   } else {
274 |                     //中文大于8个字，分段并用...代替后面的字符
275 |                     let top = d.name.substring(0, 4)
276 |                     let bot = d.name.substring(4, 7) + '...'
277 |                     d3.select(this).append('tspan')
278 |                       .text(function () { return top })
279 |                     d3.select(this).append('tspan')
280 |                       .attr('dy', '1.2em')
281 |                       .text(function () { return bot })
282 |                   }
283 |                 }
284 |               })
285 |               .attr('cursor', 'default')//设置鼠标样式
286 |               .on('touchmove', (d, i) => {
287 |                 edgesText.style('fill-opacity', function (edge) {
288 |                   if (edge.source === d || edge.target === d) {
289 |                     return 1.0
290 |                   } else {
291 |                     return 0
292 |                   }
293 |                 })
294 |                 //改本svg的层级
295 |                 d3.select(self).raise()
296 |               })
297 |               .on('touchend', (d, i) => {
298 |                 edgesText.style('fill-opacity', function (edge) {
299 |                   return 1.0
300 |                 })
301 |               })
302 |               .on('mousedown', (d, i) => {
303 |                 edgesText.style('fill-opacity', function (edge) {
304 |                   if (edge.source === d || edge.target === d) {
305 |                     return 1.0
306 |                   } else {
307 |                     return 0
308 |                   }
309 |                 })
310 |                 d3.select(self).raise()
311 |               })
312 |               .on('mouseout', (d, i) => {
313 |                 edgesText.style('fill-opacity', function (edge) {
314 |                   return 1.0
315 |                 })
316 |               })
317 |               .call(drag)
318 |           })
319 |  
320 | //        设置node和edge
321 |         force.nodes(nodes)
322 |           .force('link', d3.forceLink(links).distance(linkDistance).strength(0.1))
323 |           .restart()
324 | //        tick 表示当运动进行中每更新一帧时
325 |         force.on('tick', function () {
326 | //          //更新连接线的位置
327 |           edgesLine.attr('d', function (d) {
328 |             var path = 'M ' + d.source.x + ' ' + d.source.y + ' L ' + d.target.x + ' ' + d.target.y
329 |             return path
330 |           })
331 |  
332 |           //更新连接线上文字的位置
333 |           edgesText.attr('x', function (d) {
334 |             return (d.source.x + d.target.x) / 2
335 |           })
336 |           edgesText.attr('y', function (d) { return (d.source.y + d.target.y) / 2 })
337 |  
338 |           //更新结点和文字
339 |           d3.selectAll('circle').attr('cx', function (d) {
340 |             return d.x
341 |           })
342 |           d3.selectAll('circle').attr('cy', function (d) { return d.y })
343 |           d3.selectAll('.nodetext').attr('x', function (d) { return d.x })
344 |           d3.selectAll('.nodetext').attr('y', function (d) { return d.y })
345 |           //动态更新sptan 的x的坐标
346 |           d3.selectAll('.nodetext').selectAll('tspan')
347 |             .attr('x', function (d) {
348 |               return d.x
349 |             })
350 |         })
351 |       }
352 |     },
353 |     created () {
354 |       this.$nextTick(() => {
355 |         this.relation = JSON.parse('{"nodes":[{"name":"vicky","type":0},{"name":"海南荣恒投资控股有限公司","type":1},{"name":"长白山保护开发区恒力建设有限公司","type":1},{"name":"海宁市恒立房地产开发有限公司","type":1},{"name":"湖州白领氏房地产开发有限公司","type":1},{"name":"左建平","type":2},{"name":"恒力建设集团","type":2},{"name":"张金良","type":2},{"name":"林德仙","type":2},{"name":"钟李彬","type":2},{"name":"黄萍","type":2},{"name":"冯培华","type":2},{"name":"张乐英","type":2},{"name":"董志坚","type":2},{"name":"凌勇","type":2},{"name":"钟云锋","type":2},{"name":"翟鑫森","type":2},{"name":"糜妙娟","type":2}],"links":[{"source":0,"target":1,"relation":"投资"},{"source":0,"target":2,"relation":"投资"},{"source":0,"target":3,"relation":"投资"},{"source":0,"target":4,"relation":"投资"},{"source":5,"target":0,"relation":"股东"},{"source":6,"target":0,"relation":"股东"},{"source":7,"target":0,"relation":"股东"},{"source":8,"target":0,"relation":"股东"},{"source":9,"target":0,"relation":"股东"},{"source":10,"target":0,"relation":"股东"},{"source":11,"target":0,"relation":"股东"},{"source":12,"target":0,"relation":"股东"},{"source":13,"target":0,"relation":"股东"},{"source":14,"target":0,"relation":"股东"},{"source":15,"target":0,"relation":"股东"},{"source":16,"target":0,"relation":"股东"},{"source":17,"target":0,"relation":"股东"}],"code":200,"message":"请求成功"}')
356 |         console.log("1111",this.relation)
357 |         this.showd3()
358 |       })
359 |     }
360 |   }
361 | </script>
362 |  
363 | <style lang="less" rel="stylesheet/stylus">
364 |   .container{
365 |       height:500px ;
366 |       width:500px;
367 |         .exit{
368 |             position:absolute ;
369 |             top:20px ;
370 |             left:20px;
371 |             width:60px;
372 |             height:25px;
373 |             background: #0583f2;
374 |             border: none;
375 |             border-radius: 2px;
376 |             color: #fff;
377 |             z-index: 200;
378 |             &:hover{
379 |                 background: #1e82d9;
380 |             }
381 |         }
382 |   .labeltext{
383 |         font-size: 16px;
384 |         font-family: SimSun;
385 |         fill: #ff7438;
386 |     }
387 |  
388 |   .nodetext{
389 |     font-size: 12px;
390 |     font-family: SimSun;
391 |     fill: #fff;
392 |     position:relative
393 |   }
394 |  
395 |   .linetextRed{ 
396 |     font-size: 12px ;
397 |     font-weight: bold;
398 |     font-family: SimSun;
399 |     fill: #ff4238 !important;
400 |     color: #ff4238;
401 |     fill-opacity: 1.0 ;
402 |   }
403 |  
404 |   .linetextBlue{
405 |     font-size: 12px ;
406 |     font-weight: bold ;
407 |     font-family: SimSun ;
408 |     fill: #029ed9 !important ;
409 |     color: #029ed9 ;
410 |     fill-opacity: 1.0 ;
411 |   }
412 | 
413 |  
414 |   .svg{
415 |     position: relative;
416 |     width: 100%;
417 |     height: 100%;
418 |   }
419 | 
420 |  
421 |   .edgepath{
422 |     pointer-events: none;
423 |     stroke-width: 0.5px;
424 |   }
425 | 
426 |  
427 |   .nodeOrange{
428 |     position: relative;
429 |     fill: #ff7438 !important;
430 |     stroke: #ff7438 ;
431 |   }
432 | 
433 |  
434 |   .nodeRed{
435 |     position: relative;
436 |     fill: #ff4238 !important;
437 |     stroke: #ff4238;
438 |   }
439 | 
440 |  
441 |   .nodeBlue{
442 |     position: relative ;
443 |     fill: #029ed9 !important ;
444 |     stroke: #029ed9;
445 |   }
446 | 
447 | 
448 |   }
449 |     
450 | </style>


--------------------------------------------------------------------------------