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

1 个答案: