Vue, Webpack, DC.js, and Finally Crossfilter

Vue, Webpack, DC.js, and Finally Crossfilter

本文关键字：Finally Crossfilter and DC Webpack Vue js      更新时间：2023-09-26

我正在尝试构建一个概念验证应用程序，该应用程序使用DC.js引入一些静态数据并将其可视化。我们决定使用Vue.js作为我们的框架，使用Webpack作为我们的构建工具。我在基本配置中包含了D3.js、Crossfilter和DC.js。

resolve: {
    extensions: ['', '.js', '.vue'],
    fallback: [path.join(__dirname, '../node_modules')],
    alias: {
      'src': path.resolve(__dirname, '../src'),
      'assets': path.resolve(__dirname, '../src/assets'),
      'components': path.resolve(__dirname, '../src/components'),
      'd3': path.resolve(__dirname, '../bower_components/d3/d3.min.js'),
      'crossfilter': path.resolve(__dirname, '../bower_components/crossfilter/crossfilter.min.js'),
      'dc': path.resolve(__dirname, '../bower_components/dcjs/dc.js') // using unminified version to look at exactly where the error is coming from
    }
}

并且在文件中带有实际的可视化组件，如

var d3 = require('d3')
var cf = require('crossfilter')
var crossfilter = cf.crossfilter
var dc = require('dc')

然而，DC.js需要crossfilter才能工作，并且它挂在DC.js上下文中调用crossfilt的第一个实例上。此外，在我加载页面后，我无法再访问控制台中的crossfilter，但我可以访问D3。是什么将D3.js作为一个全局需求引入，而不是将crossfilter作为一个整体引入？

这里有我忽略的配置吗？

因此，让Crossfilter和DC.js与webpack和vue一起工作是可能的。我不得不对DC.js源代码进行修改才能使其正常工作。

  1. 在webpack.base.conf.js中，您需要将以下内容添加到模块导出中。

    plugins: [ new webpack.ProvidePlugin({ d3: 'd3', crossfilter: 'crossfilter', dc: 'dc' }) ]

这使得这三个库可以在全球范围内使用。不需要它们。

  1. 如果你像我一样使用ESlint，你需要将以下内容添加到eslintrc.js中，让它忽略你不需要这些文件的事实。

    'globals': { 'd3': true, 'dc': true, 'crossfilter': true }

  2. 最后，在'use strict';声明之后的DC.js中，您需要设置crossfilter。

    var crossfilter = crossfilter.crossfilter;

虽然这不是一个完美的答案，但它至少让我能够绘制图表。现在，如果我能想出如何将全局Crossfilter包重新定义为Crossfilter.Crossfilter，我会觉得我有一个完整的答案。

相关文章：