Fatal编程技术网
  • javascript/
  • Javascript 使用dc.js、d3.js和交叉过滤器的引用错误

Javascript 使用dc.js、d3.js和交叉过滤器的引用错误

javascript d3.js

Javascript 使用dc.js、d3.js和交叉过滤器的引用错误,javascript,d3.js,dc.js,crossfilter,Javascript,D3.js,Dc.js,Crossfilter,我正试图生成一个test dc.js图，但无论我做什么以及如何更改源文件，我都无法消除引用错误。具体地说，我正在尝试复制一个示例，从中可以得出以下结果。然而，当我执行完全相同的代码时，我得到两个引用错误；ReferenceError:d3未定义，ReferenceError:dc未定义。这是我的html页面： <!DOCTYPE html> <html lang="en"> <head> <meta charset

我正试图生成一个test 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>


风险值数据=[
{日期：“2012年12月27日”，http_404:2，http_200:190，http_302:100}，
数据
{日期：“2013年7月1日”，http_404:1，http_200:200，http_302:100}
];
var实例=交叉过滤器（数据）；
var parseDate=d3.time.format（“%m/%d/%Y”）.parse；
data.forEach（函数（d）{
d、 日期=解析日期（d.date）；
d、 总计=d.http_404+d.http_302+d.http_200；
});
打印过滤器（“数据”）；
var dateDim=instance.dimension（函数（d）{return d.date；}）；
var hits=dateDim.group（）.reduceSum（函数（d）{return d.total；}）；
var minDate=dateDim.bottom（1）[0]。日期；
var maxDate=dateDim.top（1）[0]。日期；
var hitslineChart=dc.lineChart（#chart line hitsperday”）；//参考错误号1在这里。
希斯林克哈特
.宽度（500）.高度（200）
.维度（dateDim）
.组（点击次数）
.x（d3.time.scale（）.domain（[minDate，maxDate]）；
dc.renderAll（）；
功能打印过滤器（过滤器）{
var f=评估（过滤器）；
if（typeof（f.length）！=“undefined”）{}else{}
if（typeof（f.top）！=“undefined”）{f=f.top（无穷大）；}else{
if（typeof（f.dimension）！=“undefined”）{f=f.dimension（函数（d）{return”“；}）.top（无穷大）；}else{}
console.log（filter+”（“+f.length+””=“+JSON.stringify（f）.replace（“[”，“[\n\t”）。replace（/}\，/g，“}，\n\t”）。replace（“]”，“\n]”）；
}
最令人恼火的是d3参考错误在dc.js本身中。我试着下载d3和dc的源文件，并在本地引用它们；不走运。因为找不到crossfilter的源链接，所以我不得不为crossfilter做这个操作。

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查看JSFIDLE上的外部资源部分，您将发现所有需要的参考资料。

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看一看JSFIDLE上的外部资源部分，你会发现所有需要的参考资料。

Wow，甚至不知道源是依赖顺序的。谢谢，这解决了我的问题：）哇，我甚至不知道来源是订单依赖的。谢谢，这解决了我的问题：）我看到你用云对接…我看到你用云对接。。。