d3js：未捕獲的TypeError：無法讀取未定義的屬性“長度”

Question

我是d3的新手。 我很確定我的數據沒有問題。 朝正確方向的任何觀點將不勝感激。

(function() {

  d3.json("data.json", function(error, json){
    if(error) return console.warn(error);
    data = json;

    var format = d3.time.format("%a %b %d %Y")
    var amountFn = function(d){return d.amount}
    var dateFn = function(d){
      console.log(d.bonus);
      return format.parse(d.date)

    }


    var x = d3.time.scale()
      .range([10, 280])
      .domain(d3.extent(data, dateFn));

    var y = d3.scale.linear()
      .range([180, 10])
      .domain(d3.extent(data, amountFn));

    var svg = d3.select('#demo').append("svg:svg")
      .attr("width", 300)
      .attr("height", 200)

    svg.selectAll("circle").data(data).enter()
      .append("svg:circle")
      .attr("r", 4)
      .attr("cx", function(d){return x(dateFn(d.draw_date))})
      .attr("cy", function(d){return y(amountFn(d))})
  });


 })();

我正在檢索的數據采用以下格式。

[
    {
        "date": "2015-08-26T00:00:00",
        "amount": "30"
    },
    ...more data
]

Answer 1

實際上，您在這里犯了許多愚蠢的小錯誤。 使用D3.js，您必須了解數據結構。

在您的代碼中，我發現了許多錯誤。

1.您將json存儲在一個變量中，該變量為您未初始化的數據命名，但是javascript會忽略它。

2.您傳入console.log（d.bonus）; 此密鑰在您的json中不存在，因此其值顯示為“ undefned” 。 當您觀看控制台時。

3.對於您的json數據，您需要將d.date轉換為date對象。

4.您已經將密鑰包裝在x和y中，因此您只需要傳遞

.attr("cx", function(d){ return x(d.date); })
.attr("cy", function(d){return y(d.amount); })

代替

.attr("cx", function(d){return x(dateFn(d.draw_date))})
.attr("cy", function(d){return y(amountFn(d))})

因此，我修復了代碼中的一些錯誤，可以通過在系統上運行來測試此代碼：

我的HTML：

<!DOCTYPE html>
<html>
<head>  
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/bootstrap-theme.css">
</head>    

<body>
<div class = "container">
    <div class="row">
        <div class="col-md-12">
            <div class = "panel panel-primary">
                <div class="panel-heading">
                    <h3 class="panel-title">D3 Test Example</h3>
                </div>
                <div class="panel-body">
                    <div id="demo"></div>
                <div>
            </div>
        </div>
    </div>
</div>
<script src="js/jquery-2.1.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/d3.v3.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>

我的腳本代碼在這里。

    (function() {

      d3.json("data.json", function(error, json){
        if(error) return console.warn(error);
        var data = json;  // you store your json in data variable here..

        var format = d3.time.format("%a %b %d %Y").parse; // you don't need to this...
        var amountFn = function(d){return d.amount; };

        data.forEach(function(d){
            d.date = new Date(d.date); // you convert your d.date value in date string Object 
            d.amount = d.amount;
        });

        var dateFn = function(d){
          return d.date;
        }


        var x = d3.time.scale()
          .range([10, 280])
          .domain(d3.extent(data, dateFn));

        var y = d3.scale.linear()
          .range([180, 10])
          .domain([0, d3.max(data, amountFn)]);

        var svg = d3.select('#demo').append("svg:svg")
          .attr("width", 300)
          .attr("height", 200)

        svg.selectAll("circle").data(data).enter()

          .append("svg:circle")
          .attr("r", 4)
          .attr("cx", function(d){ return x(d.date); })
          .attr("cy", function(d){return y(d.amount); })
      });

 })();

我用了這些數據。

[{“ date”：“ 2015-08-24T00：00：00”，“ amount”：“ 30”}，{“ date”：“ 2015-08-25T00：00：00”，“ amount”：“ 40 “}，{” date“：” 2015-08-26T00：00：00“，” amount“：” 50“}，{” date“：” 2015-08-27T00：00：00“，” amount“： “ 60”}，{“ date”：“ 2015-08-28T00：00：00”，“ amount”：“ 70”}，{“ date”：“ 2015-08-29T00：00：00”，“ “：” 80“}，{” date“：” 2015-08-30T00：00：00“，” amount“：” 90“}，{” date“：” 2015-08-31T00：00：00“， “ amount”：“ 100”}
]

希望這是您的問題的答案。 所以我的輸出在這里...

Answer 2

您的代碼中有兩個錯誤。

在格式字符串中，您必須將要提供的所有字段添加到格式字符串中。 因此，您應該使用d3.time.format("%Y-%m-%dT%H:%M:%S"); 而不是d3.time.format("%a %b %d %Y") 。
dateFn函數需要一個對象作為參數，而不是日期字符串。 因此將x(dateFn(d.draw_date))替換為x(dateFn(d)) 。

這是工作代碼段。

 var data = [{ "date": "2015-08-26T00:00:00", "amount": "30" }, { "date": "2015-07-26T00:00:00", "amount": "40" }]; var format = d3.time.format("%Y-%m-%dT%H:%M:%S"); var amountFn = function(d) { return d.amount }; var dateFn = function(d) { console.log(d.bonus); return format.parse(d.date) } var x = d3.time.scale() .range([10, 280]) .domain(d3.extent(data, dateFn)); var y = d3.scale.linear() .range([180, 10]) .domain(d3.extent(data, amountFn)); var svg = d3.select('#demo').append("svg:svg") .attr("width", 300) .attr("height", 200) svg.selectAll("circle").data(data).enter() .append("svg:circle") .attr("r", 4) .attr("cx", function(d) { return x(dateFn(d)) }) .attr("cy", function(d) { return y(amountFn(d)) })

 div{ height: 800px; width: 1200px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> <div id="demo"></div>

d3js：未捕獲的TypeError：無法讀取未定義的屬性“長度”

問題描述

2 個解決方案

解決方案1
2 2015-09-03 08:27:56

解決方案2
0 2015-09-03 04:50:35

d3js：未捕獲的TypeError：無法讀取未定義的屬性“長度”

問題描述

2 個解決方案

解決方案1 2 2015-09-03 08:27:56

解決方案2 0 2015-09-03 04:50:35

解決方案1
2 2015-09-03 08:27:56

解決方案2
0 2015-09-03 04:50:35