無法讀取我的Json文件以使用D3.js代碼繪製折線圖

Question

此代碼由js編程以使用D3 Libarary繪製折線圖。我面對控制檯顯示與d3.v3.min.js：1相關的錯誤（TypeError：e未定義）），並且當我點擊firefox的Debbuger tap時，它顯示此行數據

！function（）{function n（n，t）{return t> n？-1：n> t？1：n> = t？0：0/0} function t（n）{return null！= n & ！& isNaN（N）}函數E（N）{返回{左：函數（T，E，R，U）{對於（<的arguments.length 3 & &（R = 0），的arguments.length & （u = t.length）; u> r;）{var i = r + u >>> 1; n（t [i]，e）< 0？r = i + 1：u = i}返回 這條線更長！

這是我的JSON文件

{ 
"Id": 2, 
"Name": "ukraine", 
"Occurrences": [ 
    { 
     "OccurrenceDate": "Jan 2000", 
     "OccurrenceFrequency": 136 
    }, 
    { 
     "OccurrenceDate": "Feb 2000", 
     "OccurrenceFrequency": 2 
    }, 
    { 
     "OccurrenceDate": "Mar 2000", 
     "OccurrenceFrequency": 89 
    } 
    ]} 

這是我的代碼，我的代碼是使基於

<script src="http://d3js.org/d3.v3.min.js"></script>`` 
<script> 

    var margin = { top: 80, right: 80, bottom: 80, left: 80 }, 
    width = 960 - margin.left - margin.right, 
    height = 500 - margin.top - margin.bottom; 

    var parse = d3.time.format("%b %Y").parse; 

    // Scales and axes. Note the inverted domain for the y-scale: bigger is up! 

    var x = d3.time.scale().range([0, width]), 
    y = d3.scale.linear().range([height, 0]), 
    xAxis = d3.svg.axis().scale(x).tickSize(-height).tickSubdivide(true), 
    yAxis = d3.svg.axis().scale(y).ticks(4).orient("right"); 

    // An area generator, for the light fill. 

    var area = d3.svg.area() 
    .interpolate("monotone") 
    .x(function (d) { return x(d.OccurrenceDate); }) 
    .y0(height) 
    .y1(function (d) { return y(d.OccurrenceFrequency); }); 

    // A line generator, for the dark stroke. 

    var line = d3.svg.line() 
    .interpolate("monotone") 
    .x(function (d) { return x(d.OccurrenceDate); }) 
    .y(function (d) { return y(d.OccurrenceFrequency); }); 

    d3.json("readme.json", type, function (error, data) { 

     // Filter to one Name; ukraine. 

     var values = data.filter(function (d) { 
      return d.Name == "ukraine"; 
     }); 

     // Compute the minimum and maximum date, and the maximum OccurrenceFrequency. 

     x.domain([values[0].OccurrenceDate, values[values.length - 1].OccurrenceDate]); 
     y.domain([0, d3.max(values, function (d) { return d.OccurrenceFrequency; })]).nice(); 

     // Add an SVG element with the desired dimensions and margin. 

     var svg = d3.select("body").append("svg") 
     .attr("width", width + margin.left + margin.right) 
     .attr("height", height + margin.top + margin.bottom) 
     .append("g") 
     .attr("transform", "translate(" + margin.left + "," + margin.top + ")") 
     .on("click", click); 

     // Add the clip path. 

     svg.append("clipPath") 
     .attr("id", "clip") 
     .append("rect") 
     .attr("width", width) 
     .attr("height", height); 

     // Add the area path. 

     svg.append("path") 
     .attr("class", "area") 
     .attr("clip-path", "url(#clip)") 
     .attr("d", area(values)); 

     // Add the x-axis. 

     svg.append("g") 
     .attr("class", "x axis") 
     .attr("transform", "translate(0," + height + ")") 
     .call(xAxis); 

     // Add the y-axis. 

     svg.append("g") 
     .attr("class", "y axis") 
     .attr("transform", "translate(" + width + ",0)") 
     .call(yAxis); 

     // Add the line path. 

     svg.append("path") 
     .attr("class", "line") 
     .attr("clip-path", "url(#clip)") 
     .attr("d", line(values)); 

     // Add a small label for the name. 

     svg.append("text") 
     .attr("x", width - 6) 
     .attr("y", height - 6) 
     .style("text-anchor", "end") 
     .text(values[0].Name); 

     // On click, update the x-axis. 

     function click() { 
      var n = values.length - 1, 
      i = Math.floor(Math.random() * n/2), 
      j = i + Math.floor(Math.random() * n/2) + 1; 
      x.domain([values[i].OccurrenceDate, values[j].OccurrenceDate]); 
      var t = svg.transition().duration(750); 
      t.select(".x.axis").call(xAxis); 
      t.select(".area").attr("d", area(values)); 
      t.select(".line").attr("d", line(values)); 
     } 
    }); 

    // Parse dates and numbers. We assume values are sorted by date. 

    function type(d) { 
     d.OccurrenceDate = parse(d.OccurrenceDate); 
     d.OccurrenceFrequency = +d.OccurrenceFrequency; 
     return d; 
    } 

</script> 

Answer 1

要使用d3.json（），你需要日線圖到設置網絡服務器。這很容易。 從Windows資源管理器打開文件將顯示靜態內容，但無法通過'HTTP GET'處理加載更多文件。我想，'字符串是未定義的'是由於json文件未加載而導致的，因此d3.json中的字符串不僅是空的，而是未定義的。

• 下載XAMPP - apache webserver, database etc捆綁在一個簡單的安裝包。
• 將HTML和JSON文件放在'htdocs'文件夾中。在安裝路徑中查找名爲「htdocs」的文件夾（例如C：\ xamppfiles \ htdocs）。
• xampp控制中心啓動網絡服務器。
• 在你網頁瀏覽器瀏覽到本地主機/nameOfTheHtmlFile.html
• 帖子的回覆，你所看到的，並且可以顯示什麼樣的錯誤。

Answer 2

如果應該看起來像這樣，繼續閱讀4 tipps。

我做了幾個更新：

JSON需要是一個數組，所以用[]如果可能圍繞着它（我認爲，D3提供了一些對象到陣列變換器）

[{ 
"Id": 2, 
"Name": "ukraine", 
"Occurrences": [... ] 
}] // brackets are important 

d3.json（url，callbackFunction） 這隻需要兩個參數，而不是三個。

d3.json("soD3Question.json", function (data) { ... }); 

解析時間格式 您不能將此功能添加到d3.json。你可以遍歷數組並通過你自己來交替值。

var parse = d3.time.format("%b %Y").parse; 
var parseAllDates = function () { 
    for (var i = 0; i < data[0].Occurrences.length; i++) { 
     data[0].Occurrences[i].OccurrenceDate = parse(data[0].Occurrences[i].OccurrenceDate); 
    } 
} 

d3.json("soD3Question.json", function (jsonData) { 
     data = jsonData; 
     parseAllDates(); // call date parser 
     ... 

SVG顏色我剛可以猜測，因爲沒有提供樣式表和的3個黑色重疊pathes，顏色圖像包含例如

path.domain{ fill: lightgrey; } 
path.line{ fill: white;} 
path.area{ fill: grey; } 

----------所以這裏談到的完整代碼（不要忘了在JSON文件括號中）-----------

<!DOCTYPE html> 
<html> 
<head> 
    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script> 
    <script src="http://d3js.org/d3.v3.js" charset="utf-8"></script> 
    <title></title> 
    <style> 
     path.domain {fill: lightgrey;} 
     path.line {fill: white;} 
     path.area {fill: grey;} 
    </style> 
</head> 
<body> 
<script> 
    var margin = { top: 80, right: 80, bottom: 80, left: 80 }, 
      width = 960 - margin.left - margin.right, 
      height = 500 - margin.top - margin.bottom; 
    var data; 
    var parse = d3.time.format("%b %Y").parse; 
    var parseAllDates = function() { 
     for (var i = 0; i < data[0].Occurrences.length; i++) { 
      data[0].Occurrences[i].OccurrenceDate = parse(data[0].Occurrences[i].OccurrenceDate); 
     } 
    } 
    // Scales and axes. Note the inverted domain for the y-scale: bigger is up! 

    var x = d3.time.scale().range([0, width]), 
      y = d3.scale.linear().range([height, 0]), 
      xAxis = d3.svg.axis().scale(x).tickSize(-height).tickSubdivide(true), 
      yAxis = d3.svg.axis().scale(y).ticks(4).orient("right"); 

    // An area generator, for the light fill. 

    var area = d3.svg.area() 
      .interpolate("monotone") 
      .x(function (d) { 
       return x(d.OccurrenceDate); 
      }) 
      .y0(height) 
      .y1(function (d) { 
       return y(d.OccurrenceFrequency); 
      }); 

    // A line generator, for the dark stroke. 

    var line = d3.svg.line() 
      .interpolate("monotone") 
      .x(function (d) { 
       return x(d.OccurrenceDate); 
      }) 
      .y(function (d) { 
       return y(d.OccurrenceFrequency); 
      }); 


    // d3.json("soD3Question.json", type, function (error, data) { 
    d3.json("soD3Question.json", function (jsonData) { 
     data = jsonData; 
     parseAllDates(); 
     // Filter to one Name; ukraine. 

     var values = data.filter(function (d) { 
      return d.Name == "ukraine"; 
     }); 


     // Compute the minimum and maximum date, and the maximum OccurrenceFrequency. 
     values = values[0].Occurrences; 
     x.domain([values[0].OccurrenceDate, values[values.length - 1].OccurrenceDate ]); 
     y.domain([0, d3.max(values, function (d) { 
      return d.OccurrenceFrequency; 
     })]).nice(); 

     // Add an SVG element with the desired dimensions and margin. 

     var svg = d3.select("body").append("svg") 
       .attr("width", width + margin.left + margin.right) 
       .attr("height", height + margin.top + margin.bottom) 
       .append("g") 
       .attr("transform", "translate(" + margin.left + "," + margin.top + ")") 
       .on("click", click); 

     // Add the clip path. 

     svg.append("clipPath") 
       .attr("id", "clip") 
       .append("rect") 
       .attr("width", width) 
       .attr("height", height); 

     // Add the x-axis. 

     svg.append("g") 
       .attr("class", "x axis") 
       .attr("transform", "translate(0," + height + ")") 
       .call(xAxis); 

     // Add the y-axis. 

     svg.append("g") 
       .attr("class", "y axis") 
       .attr("transform", "translate(" + width + ",0)") 
       .call(yAxis); 

     // Add the line path. 

     svg.append("path") 
       .attr("class", "line") 
       .attr("clip-path", "url(#clip)") 
       .attr("d", line(values)); 

     // Add the area path. 

     svg.append("path") 
       .attr("class", "area") 
//    .attr("clip-path", "url(#clip)") // needs to be defined 
       .attr("d", area(values)); 

     // Add a small label for the name. 
     svg.append("text") 
       .attr("x", width - 6) 
       .attr("y", height - 6) 
       .style("text-anchor", "end") 
       .text(values[0].Name); 

     // On click, update the x-axis. 

     function click() { 
      var n = values.length - 1, 
        i = Math.floor(Math.random() * n/2), 
        j = i + Math.floor(Math.random() * n/2) + 1; 
      x.domain([values[i].OccurrenceDate, values[j].OccurrenceDate]); 
      var t = svg.transition().duration(750); 
      t.select(".x.axis").call(xAxis); 
      t.select(".area").attr("d", area(values)); 
      t.select(".line").attr("d", line(values)); 
     } 
    }); 
</script> 

</body> 
</html>