使用dc.js，d3.js和交叉过滤器的参考错误 [英] Reference errors using dc.js, d3.js and crossfilter
问题描述
我正在尝试生成测试dc.js图，但是无论我做什么以及如何更改源文件，我都无法摆脱参考错误.具体来说，我正在尝试从此图.但是，当我执行完全相同的代码时，会出现两个引用错误； ReferenceError:d3未定义，并且ReferenceError:dc未定义.这是我的html页面:
I'm attempting to generate a test dc.js graph but I can't get rid of reference errors, no matter what I do and how I change my source files. Specifically, I'm trying to replicate the example from this tutorial which should result in this graph. However, when I do the exact same code, I get two reference errors; ReferenceError: d3 is not defined, and ReferenceError: dc is not defined. Here's my html page:
<!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的源文件并在本地引用它们；没运气.我必须为交叉过滤器执行此操作，因为找不到它的源链接.
The most annoying part is that the d3 reference error is within dc.js itself. I've tried downloading the source files for d3 and dc and referencing them locally; no luck. I had to do that for crossfilter since I couldn't find a source link for it.
推荐答案
dc.js取决于d3.js，因此d3.js应该首先出现. crossfilter.js似乎是独立的，因此可以出现在任何地方.正确的顺序是
dc.js depends on d3.js, so d3.js should appear first. crossfilter.js seems to be independent, so it can appear anywhere. Right order is
<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，否则您的图将很丑
Don't forget to include dc.css, or your plots will be ugly
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/dc/1.7.5/dc.css"/>
PS查看jsfiddle上的外部资源"部分，您将在其中找到所有需要的参考.
PS Look at the section External resources on jsfiddle, you will find there all needed references.
这篇关于使用dc.js，d3.js和交叉过滤器的参考错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
