vuejs中使用es6 import导入d3-sankey

Question

我正在尝试在 vuejs 应用程序中使用 d3js 和 d3-sankey 插件。我正在使用："d3": "^5.9.7" &"d3-sankey": "^0.12.1" 这是我的 .vue

中的脚本

<script>
import axios from 'axios';
import PageHeader from '@/components/Header.vue'

import * as d3 from 'd3';
import 'd3-sankey';

export default {
  name: 'sankey',
    data() {
        return {
            posts: [],
            errors: []
        }
    },
   mounted() {
          axios
            .get('https://cdn.rawgit.com/q-m/d3.chart.sankey/master/example/data/product.json')
            .then(response =>{
               var sankey = d3.sankey();
               console.log(sankey);
            })
            .catch(e => {
                this.errors.push(e)
            })
   }
}
</script>

请问如何正确导入插件？

Answer 1

我在 Angular 8 应用程序中像这样导入它：

import * as d3 from 'd3';
import { sankey as d3Sankey, sankeyLinkHorizontal as d3SsankeyLinkHorizontal } from 'd3-sankey';

那么你可以这样使用它：

const sankeyDiagram = d3Sankey()
  .nodeWidth(15)
  .nodePadding(10)
  .extent([[1, 5], [this.width - 1, this.height - 5]]);

我这样使用 sankeyLinkHorizontal：

link.append('path')
    .attr('d', d3SsankeyLinkHorizontal())
    .attr('stroke', (d: any) => {
      return (this.edgeColor === 'none') ? '#aaa'
       : this.edgeColor === 'path' ? `url(#${d.uid})`
       : this.edgeColor === 'input' ? this.color(d.source.name)
       : this.color(d.target.name);
    })
    .attr('stroke-width', (d: any) => Math.max(1, d.width));

vuejs中使用es6 import导入d3-sankey

Use es6 import in vuejs to import d3-sankey

d3.js

vue.js

es6-modules