web-dev-qa-db-ja.com

Uncaught TypeError：nullエラーのプロパティ 'textContent'を読み取れません

Dc.jsを使用してクロスフィルターとd3を実装しようとしています。私はほとんど成功しています。 JSFiddleでコードを実行すると、問題なく動作します。しかし、ローカルシステムに正確なコードを実装しようとすると、ncaught TypeError：Cannot read property'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;

javascriptd3.jsdc.jscrossfilter
4
aakashgupta.0205

私は同じ問題を抱えていました！ localy次のことがわかりました：

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

だった置き忘れ！

セットアップしてみてくださいall HTMLコンテンツbeforeJSファイル。そしてうまくいくでしょう！

例を参照してください。

obs：html（必須）がjsスクリプトの前にレンダリングされるため、JSFiddleで機能していました。

うまくいけば、あなたにもうまくいくでしょう。

<!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>
8
Alvaro Joao