Question

NVD3包含十几种做图表的方式，约为。压缩前500KB。我想找到修改此文件的方法，特别是因为我们只使用折线图和条形图。

构建模块化NVD3库的推荐方法是什么？

Answer 1

我修改了grunt file评论所有不需要的东西：

src: [
   'src/intro.js',
   'src/core.js',
   'src/interactiveLayer.js',
   'src/tooltip.js',
   'src/utils.js',
   'src/models/axis.js',
   // 'src/models/historicalBar.js',
   // 'src/models/bullet.js',
   // 'src/models/bulletChart.js',
   // 'src/models/cumulativeLineChart.js',
   // 'src/models/discreteBar.js',
   // 'src/models/discreteBarChart.js',
   // 'src/models/distribution.js',
   'src/models/historicalBar.js',
   // 'src/models/historicalBarChart.js',
   // 'src/models/indentedTree.js',
   'src/models/legend.js',
   'src/models/line.js',
   // 'src/models/lineChart.js',
   'src/models/linePlusBarChart.js',
   // 'src/models/lineWithFocusChart.js',
   // 'src/models/linePlusBarWithFocusChart.js',
   // 'src/models/multiBar.js',
   // 'src/models/multiBarChart.js',
   // 'src/models/multiBarHorizontal.js',
   // 'src/models/multiBarHorizontalChart.js',
   // 'src/models/multiChart.js',
   // 'src/models/ohlcBar.js',
   // 'src/models/pie.js',
   // 'src/models/pieChart.js',
   'src/models/scatter.js',
   // 'src/models/scatterChart.js',
   // 'src/models/scatterPlusLineChart.js',
   // 'src/models/sparkline.js',
   // 'src/models/sparklinePlus.js',
   // 'src/models/stackedArea.js',
   // 'src/models/stackedAreaChart.js',
   'src/outro.js'
   ]

这样可行，但基于模块（browserify，AMD ......）的更好的解决方案将是首选。

Answer 2

所以在v1.8.2更新之后gruntfile已经改变了一点点。您将不再看到js文件列表。而不是它，你会看到'src/models/*.js',

我正在根据所选答案创建自定义构建。因此，为了创建它，我浏览每个图表模块并记下他们正在使用的模型。稍后，我将这些js-files添加到concat.js.src中的Gruntfile.js对象中。以下是大多数公共LineChart的示例：

concat: {
    ...
    js: {
        options: {
            ...
        },
        src: [
        'src/core.js',
        'src/dom.js',
        'src/interactiveLayer.js',
        'src/tooltip.js',
        'src/utils.js',
        //Include all files in src/models
        // 'src/models/*.js',
        // example to exclude files: '!src/models/excludeMe*'
        'src/models/axis.js',
        'src/models/legend.js',
        'src/models/line.js',
        'src/models/lineChart.js',
        'src/models/scatter.js',
        ],
        ...
    }
},

制作自定义nvd3构建的推荐方法是什么？

2 个答案: