Uncaught TypeError: Cannot read property 'textContent' of null error

Question

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

我的密码是

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;

Answer 1

我遇到了同样的问题！ localy 刚刚发现：

 <div id="year-chart"></div>

被放错了地方！

只需尝试设置所有您的 html 内容在 JS 文件之前。并且会正常工作！

看例子：

obs：它在 JSFiddle 上工作，因为 html（必须）在 js 脚本之前 rend！

希望对你也有用。

<!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>

Answer 2

我将 .js 文件 link 移到了 html 的底部并且 问题解决了 .