在 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));