未捕获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;

来源

2015-10-06 aakashgupta.0205

你明白，你刚刚导入正确此行''其他进口错误.... –

请正确导入其他'脚本' –

其他**脚本**在本地系统上下载并保存在js文件夹放在同一个目录下。 –

我有同样的问题！ 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>  </body> </html>

来源

2015-10-06 18:07:36

@数据库检查这个答案 –

hi @alvaroJoao，我相信所有的资源都在** trial1.js **之前加载，因为当我尝试调试脚本文件时，它会完美运行直到最后一行。在** render（）**和/或** renderAll（）**中似乎存在一些问题。它不断给我的错误**未捕获TypeError：无法读取null错误的属性'textContent'** –

此外，当我在** jsfiddle **中使用相同的代码，它似乎在那里完美工作。我不知道我到底错过了什么！ –

未捕获TypeError：无法读取属性'textContent'空错误

回答

相关问题