未捕获的 TypeError：无法读取 null 错误的属性“textContent”答案

【问题标题】：Uncaught TypeError: Cannot read property 'textContent' of null error未捕获的 TypeError：无法读取 null 错误的属性“textContent”
【发布时间】：2016-01-03 14:04:09
【问题描述】：

我正在尝试使用 dc.js 来实现交叉过滤器和 d3。我几乎成功了。当我在 JSFiddle 中运行我的代码时，它运行良好！但是当我尝试在本地系统上实现确切的代码时，它给了我 Uncaught TypeError: Cannot read property 'textContent' of null 错误。

我的代码是

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)
	.centerBar(true)
    .yAxisLabel("Productions per day")
	.xUnits(function(){return 10;});

yearChart.render();

<html>
	<head>
	<meta charset="utf-8">
		<script src="https:////cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js" charset="utf-8"></script>
		<script type="text/javascript" src="https://dc-js.github.io/dc.js/js/d3.js"></script>
		<script type="text/javascript" src="https://dc-js.github.io/dc.js/js/crossfilter.js"></script>
		<script type="text/javascript" src="https://dc-js.github.io/dc.js/js/dc.js"></script>
		<script type="text/javascript" src="https://dc-js.github.io/dc.js/js/colorbrewer.js"></script>
		<script type="text/javascript" src = "trial1.js"></script>
	</head>
	<body>
	<div id="year-chart"></div>
	</body>
</html>

d3.js 中给出错误的代码行是 this.node().textContent;强>

【问题讨论】：

你明白你刚刚正确导入了这一行<script src="https:////cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js" charset="utf-8"></script>其他的导入是错误的......
请正确导入另一个scripts
其他脚本下载到本地系统，保存在同目录下的js文件夹中。
嘿@Databases，您需要正确导入，以便我们查找问题所在......
嗨@AlvaroJoao，按照你的要求完成

标签： javascript d3.js dc.js crossfilter

【解决方案1】：

我遇到了同样的问题！ 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');

		//the data
		var data = [{
		    date: "2015-10-01",
		    customer: "BOASG",
		    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;
		window.alert(minDate);
		var maxDate = dateDim.top(1)[0].date;
		window.alert(maxDate);

		yearChart.width(2000).height(200)
		    .dimension(dateDim)
		    .group(productions)
		    .x(d3.time.scale().domain([minDate, maxDate]))
		    .brushOn(false)
		    .centerBar(true)
		    .yAxisLabel("Productions per day")
		    .xUnits(function () {
		    return 10;
		});

		dc.renderAll();

</script>
 <!-- <div id="year-chart"></div>  if you set the code here you will be able to reproduce the issue.-->
</body>
</html>

【讨论】：

@Databases 检查这个答案
嗨@alvaroJoao，我相信所有资源都在 trial1.js 之前加载，因为当我尝试调试脚本文件时，它一直运行到最后一行。 render() 和/或 renderAll() 中似乎存在一些问题。它一直给我错误 Uncaught TypeError: Cannot read property 'textContent' of null error
此外，当我在 jsfiddle 中使用相同的代码时，它似乎可以完美地工作。我不知道我到底错过了什么！
您可以发布您正在使用的确切代码吗？还是 JSfiddle？@Databases
非常感谢朋友！创造奇迹！只是好奇，我可以将脚本放在另一个文件中并导入吗？

【解决方案2】：

我将 .js 文件 链接移到了 html 的底部并问题解决了。

【讨论】：