Question

我正在使用d3创建一些交互式的应用程序映射，并已成功使用汇总来捆绑javascript。一世过去使用过dc.js，并希望合并一堆dc.js图进入应用程序。但是我一直无法弄清楚如何获得 dc.js用于汇总。在一些讨论中提到 dc.js问题跟踪器（example），所以我很确定可以做到。我希望有人可以指出我的错误。

我创建了一个最小的示例，使用单个简单的dc.barChart从此处修改：dc Bar Chart Example。什么时候我称rollup -c，创建了bundle.js，但是：

警告“ node.modules \ dc \ dc.js未导出dc.barChart”和
加载html页面时，该图未显示，并且控制台说：“未捕获的TypeError：无法添加属性框，对象不可扩展。”“框”似乎是指的是d3.box，但我不知道为什么。

这是我的最小index.html：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width">
        <title>dc.js Rollup</title>

        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dc/3.0.7/dc.css" />
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" />
    </head>
    <body>

        <div id="container" class="container" >
            <h3>A dc.js bar graph:</h3>
            <div id="test"></div>
            <p>modified from <a href="https://dc-js.github.io/dc.js/examples/bar.html">this example</a>.</p>
        </div>

        <script type="text/javascript" src="bundle.js"></script>


    </body>
</html>

这是main.js：

import * as d3  from 'd3';
import crossfilter from 'crossfilter2';
import * as dc from 'dc';


let chart = dc.barChart('#test');

d3.csv('morley.csv').then(function(experiments) {
  experiments.forEach(function(x) {
    x.Speed = +x.Speed;
  });

  let ndx  = crossfilter(experiments);
  let runDimension = ndx.dimension(function(d) {return +d.Run;});
  let speedSumGroup = runDimension
      .group().reduceSum(function(d)
                         {return d.Speed * d.Run / 1000;});

  chart
    .width(768)
    .height(480)
    .x(d3.scaleLinear().domain([6,20]))
    .brushOn(false)
    .yAxisLabel('This is the Y Axis!')
    .dimension(runDimension)
    .group(speedSumGroup)
    .on('renderlet', function(chart) {
      chart.selectAll('rect').on('click', function(d) {
        console.log('click!', d);
      });
    });

  chart.render();

});

export { dc, d3, crossfilter };

最后是rollup.config.js：

import  resolve  from 'rollup-plugin-node-resolve';
import  globals  from 'rollup-plugin-node-globals';
import commonjs from 'rollup-plugin-commonjs';
import json from 'rollup-plugin-json';
import sourcemaps from 'rollup-plugin-sourcemaps';


function onwarn (warning, warn) {
  if (warning.code === 'CIRCULAR_DEPENDENCY') return;
  warn(warning);
}


export default {
  input: 'main.js',

  output: {
    name: 'dcjs_rollup',
    file: 'bundle.js',
    format: 'iife',
    sourceMap: true,
    globals: {
      'd3': 'd3',
      'dc': 'dc',
      'crossfilter2': 'crossfilter'
    }

  },
  onwarn: onwarn,
  plugins: [
    resolve({
      jsnext: true,
      main: true,
      browser: true
    }),
    sourcemaps(),
    json(),
    commonjs(),
    globals(),

  ]
};

我希望我的配置中缺少一些简单的东西文件或只需要包含另一个插件，但是我完全没有了的想法。

有什么建议吗？

亚当

如何将dc.js图与汇总捆绑在一起？

0 个答案: