使用 RequireJS 访问 dc.js 和交叉过滤器

Question

我正在尝试使用 require js 将 dc 和交叉过滤器导入我的环境。

我在我的 js 文件中使用了以下代码：

    require.config({
    paths: {

       "crossfilter": "https://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.7/crossfilter",
       "d3": "https://cdnjs.cloudflare.com/ajax/libs/d3/4.4.0/d3",
       "dc": "https://cdnjs.cloudflare.com/ajax/libs/dc/2.1.0-dev/dc"
    }
}); 
require(['crossfilter','d3','dc'], function(){

    console.log("alert");
    });

但是我的控制台出现错误。在一些进一步的探测中，utils.js 文件似乎在第一行中抛出了一个错误：

我没有在我的代码中的任何地方包含 utils.js。我猜它是从 cdn 自动传送的。

如果我在没有 dc.js 文件的情况下调用 requireJS 依赖项，crossfilter 和 d3 在我加载我的页面时不会抛出错误。我可能遗漏了什么？

编辑： 我向后移植到 d3 v3.5，这个问题得到了解决。但是现在我在调用图表时无法访问 dc 对象。我可以在控制台中看到此错误。我什至在调用 dc Shim 时添加了对 d3 的依赖，但它没有用。这是我的 html 和 JS 代码。我会共享一个 JS Fiddle 但不确定它是否可以通过控制台进行调试。

HTML 代码

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Require js</title>

        <!-- 1. Add these JavaScript inclusions in the head of your page -->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

        <link rel="stylesheet" href="required.css" />

    </head>
    <body>
        <!-- 3. Add the container -->
        <div id="container" style="width: 800px; height: 400px; margin: 0 auto"></div>

    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.2/require.js"></script>

    <script src='required.js' type='text/javascript'></script>  
    </body>
</html>

JS代码

    require.config({
    paths: {

       "crossfilter": "https://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.5/crossfilter",
       "d3": "https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3",
       "dc": "https://cdnjs.cloudflare.com/ajax/libs/dc/2.1.0-dev/dc"
    },
    shim:{
       'dc':{
         deps:['d3'],
         exports:'dc'
        } 
    }
});

    data = [{
      "name":"anmol",
      "age":"27",
      "salary": "less"
    }]
    require(['crossfilter','d3','dc'], function(){
        console.log(data);
    $(document.body).append('<div id="funding-chart"></div>');
    var ndx = crossfilter(data);
    var fundingStatus = ndx.dimension(function(d) { return d.funding_status; });
    var projectsByFundingStatus = fundingStatus.group();
    var hutu = fundingStatus.top(Infinity);
    console.log(hutu);
    var fundingStatusChart = dc.pieChart("#funding-chart");
              fundingStatusChart
                .height(220)
                //.width(350)
                .radius(90)
                .innerRadius(40)
                .transitionDuration(1000)
                .dimension(fundingStatus)
                .group(projectsByFundingStatus);
      dc.renderAll();
        });

非常感谢任何帮助。

Answer 1

我想通了。原来这是我使用的 d3 版本的问题。我移植回 v3.5.3 并且它有效。

Answer 2

这里存在三个问题

您的 require() 回调函数需要接收您需要的库。这是模块系统的一大卖点，模块没有 "pollute" 全局命名空间。（当然不是每个图书馆都遵循这个，但它是规范并且 dc.js 确实遵循它。）
您使用的 crossfilter 版本与 AMD 不兼容，因此需要填充。 the community fork of crossfilter are AMD-compatible, but I wasn't able to find it in a CDN (there's an open issue)
dc.js 是 AMD 兼容的，因此不需要 填充。

是的，客户流失。我们喜欢它，这就是我们使用 JavaScript 的原因，对吧？没有？

因此，shim 部分应为：

shim:{
   'crossfilter':{
     exports:'crossfilter'
    } 
}

并且 require() 调用应为：

require(['crossfilter','d3','dc'], function(crossfilter, d3, dc){
    // ...

这是一个工作 bl.ock:

http://bl.ocks.org/gordonwoodhull/027ab249c86a9370b25eeae5ef5ed2c1

（你是对的，我不相信 jsfiddle 可以测试 requireJS 的东西。基本的调试是可行的，但这是非常低级的东西。）

最后，如果您愿意从 rawgit.com 中提取 crossfilter，则可以完全取消垫片。

   "crossfilter": "https://cdn.rawgit.com/crossfilter/crossfilter/master/crossfilter",

http://bl.ocks.org/gordonwoodhull/dfe28f28213c57b53718fe9255ce7cbc

使用 RequireJS 访问 dc.js 和交叉过滤器

Accessing dc.js and crossfilter with RequireJS

requirejs

crossfilter

dc.js