未捕获TypeError:无法读取属性'textContent'空错误
我想使用dc.js来实现crossfilter和d3。我几乎成功了。当我在JSFiddle中运行我的代码时,它工作完好!但是当我尝试在本地系统上实现确切的代码时,它会给我未捕获的类型错误:无法读取属性'textContent'为空的错误。未捕获TypeError:无法读取属性'textContent'空错误
我的代码是
trial1.js
var yearChart = dc.barChart('#year-chart');
//the data
var data = [
{date: "2015-10-01", type: "car", quantity: 3}];
var dispatch = crossfilter(data);
var parseDate = d3.time.format("%Y-%m-%d").parse;
data.forEach(function (d) {
d.date = parseDate(d.date);
d.quantity = +d.quantity;
d.Year = d.date.getFullYear();
});
var dateDim = dispatch.dimension(function (d) {
return d.date;
});
var productions = dateDim.group().reduceSum(function (d) {
return d.quantity;
});
var minDate = dateDim.bottom(1)[0].date;
var maxDate = dateDim.top(1)[0].date;
yearChart.width(2000).height(200)
.dimension(dateDim)
.group(productions)
.x(d3.time.scale().domain([minDate, maxDate]))
.brushOn(false)
\t .centerBar(true)
.yAxisLabel("Productions per day")
\t .xUnits(function(){return 10;});
yearChart.render();
<html>
\t <head>
\t <meta charset="utf-8">
\t \t <script src="https:////cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js" charset="utf-8"></script>
\t \t <script type="text/javascript" src="https://dc-js.github.io/dc.js/js/d3.js"></script>
\t \t <script type="text/javascript" src="https://dc-js.github.io/dc.js/js/crossfilter.js"></script>
\t \t <script type="text/javascript" src="https://dc-js.github.io/dc.js/js/dc.js"></script>
\t \t <script type="text/javascript" src="https://dc-js.github.io/dc.js/js/colorbrewer.js"></script>
\t \t <script type="text/javascript" src = "trial1.js"></script>
\t </head>
\t <body>
\t <div id="year-chart"></div>
\t </body>
</html>
的代码在d3.js给出错误的行是this.node() .textContent;
我有同样的问题! localy
刚刚发现的:
<div id="year-chart"></div>
是错位的!
之前的JS
文件只是试图建立所有您的HTML内容。并会正常工作!
看到例如:
OBS:这是工作在的jsfiddle因为HTML(必须)烈js
脚本之前!
希望也能为你效劳。
<!DOCTYPE html>
<html lang="en">
<head>
<title>dc.js - Bar Chart Example</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="http://dc-js.github.io/dc.js/css/dc.css"/>
<script src="https:////cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js" charset="utf-8"></script>
<script src="http://dc-js.github.io/dc.js/js/d3.js" charset="utf-8"></script>
<script src="http://dc-js.github.io/dc.js/js/crossfilter.js"></script>
<script src="http://dc-js.github.io/dc.js/js/dc.js"></script>
</head>
<body>
<div id="year-chart"></div>
<script type="text/javascript">
var yearChart = dc.barChart('#year-chart');
\t \t //the data
\t \t var data = [{
\t \t date: "2015-10-01",
\t \t customer: "BOASG",
\t \t quantity: 3
\t \t }];
\t \t var dispatch = crossfilter(data);
\t \t var parseDate = d3.time.format("%Y-%m-%d").parse;
\t \t data.forEach(function (d) {
\t \t d.date = parseDate(d.date);
\t \t d.quantity = +d.quantity;
\t \t d.Year = d.date.getFullYear();
\t \t });
\t \t var dateDim = dispatch.dimension(function (d) {
\t \t return d.date;
\t \t });
\t \t var productions = dateDim.group().reduceSum(function (d) {
\t \t return d.quantity;
\t \t });
\t \t var minDate = dateDim.bottom(1)[0].date;
\t \t window.alert(minDate);
\t \t var maxDate = dateDim.top(1)[0].date;
\t \t window.alert(maxDate);
\t \t yearChart.width(2000).height(200)
\t \t .dimension(dateDim)
\t \t .group(productions)
\t \t .x(d3.time.scale().domain([minDate, maxDate]))
\t \t .brushOn(false)
\t \t .centerBar(true)
\t \t .yAxisLabel("Productions per day")
\t \t .xUnits(function() {
\t \t return 10;
\t \t });
\t \t dc.renderAll();
</script>
<!-- <div id="year-chart"></div> if you set the code here you will be able to reproduce the issue.-->
</body>
</html>
@数据库检查这个答案 –
hi @alvaroJoao,我相信所有的资源都在** trial1.js **之前加载,因为当我尝试调试脚本文件时,它会完美运行直到最后一行。在** render()**和/或** renderAll()**中似乎存在一些问题。它不断给我的错误**未捕获TypeError:无法读取null错误的属性'textContent'** –
此外,当我在** jsfiddle **中使用相同的代码,它似乎在那里完美工作。我不知道我到底错过了什么! –
你明白,你刚刚导入正确此行''其他进口错误.... –
请正确导入其他'脚本' –
其他**脚本**在本地系统上下载并保存在js文件夹放在同一个目录下。 –