使用dc.js、d3.js和crossfilter引用错误

Reference errors using dc.js, d3.js and crossfilter

本文关键字：js crossfilter 引用 错误 d3 dc 使用      更新时间：2023-09-26

我试图生成一个测试dc.js图，但无论我做什么以及如何更改源文件，我都无法消除引用错误。具体来说，我试图复制本教程中的示例，该示例应该会生成此图。然而，当我执行完全相同的代码时，我会得到两个参考错误；ReferenceError:d3未定义，ReferenceError:dc未定义。这是我的html页面：

        <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <script type="text/javascript" src="http://cdnjs.buttflare.com/ajax/libs/dc/1.7.0/dc.js"></script>
        <script type="text/javascript" src="crossfilter.js"></script>
        <script type="text/javascript" src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
    </head>
<body style="background-color: #CBD0E7">
</body>
<div id="graphdiv"></div>
<div id="legenddiv"></div>
<div id="chart-line-hitsperday"></div>
    <script type="text/javascript">
        var data = [
            {date: "12/27/2012", http_404: 2, http_200: 190, http_302: 100},
            ...data...
            {date: "01/07/2013", http_404: 1, http_200: 200, http_302: 100}
        ];
        var instance = crossfilter(data);
        var parseDate = d3.time.format("%m/%d/%Y").parse;
        data.forEach(function(d) {
            d.date = parseDate(d.date);
            d.total = d.http_404 + d.http_302 + d.http_200;
        });
        print_filter("data");
        var dateDim = instance.dimension(function(d) { return d.date; });
        var hits = dateDim.group().reduceSum(function(d) { return d.total; });
        var minDate = dateDim.bottom(1)[0].date;
        var maxDate = dateDim.top(1)[0].date;
        var hitslineChart = dc.lineChart("#chart-line-hitsperday");  // reference error number 1 is here.
        hitslineChart
            .width(500).height(200)
            .dimension(dateDim)
            .group(hits)
            .x(d3.time.scale().domain([minDate,maxDate])); 
        dc.renderAll();
        function print_filter(filter){
            var f=eval(filter);
            if (typeof(f.length) != "undefined") {}else{}
            if (typeof(f.top) != "undefined") {f=f.top(Infinity);}else{}
            if (typeof(f.dimension) != "undefined") {f=f.dimension(function(d) { return "";}).top(Infinity);}else{}
            console.log(filter+"("+f.length+") = "+JSON.stringify(f).replace("[","['n't").replace(/}',/g,"},'n't").replace("]","'n]"));
        } 
    </script>
    </html>

最令人讨厌的部分是d3引用错误在dc.js本身中。我尝试下载d3和dc的源文件，并在本地引用它们；没有运气。我不得不为交叉过滤器做这件事，因为我找不到它的源链接。

dc.js依赖于d3.js，因此d3.js应该首先出现。crossfilter.js似乎是独立的，所以它可以出现在任何地方。正确的订单是

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.js" charset="utf-8"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/dc/1.7.5/dc.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.12/crossfilter.js"></script>

别忘了包括dc.css，否则你的情节将是丑陋的

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/dc/1.7.5/dc.css"/>

PS看看jsfiddle上的外部资源部分，你会发现那里有所有需要的参考资料。

相关文章：