在d3.js中導入json文件

我對d3.js非常陌生，並且正在使用d3.js中的json數據創建線圖。當json數據位於html文件中時，該代碼運行良好，但我想從html中提取數據並將數據作爲json文件引用。樣品的index.html看起來是這樣的：在d3.js中導入json文件

<!DOCTYPE html> 
<html lang="en"> 

<body> 
      <svg id="visualisation" width="1000" height="500"></svg> 
      <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> 
      <script> 
       function InitChart() { 
        var data = [{ 
         "sale": "202", 
         "year": "2000" 
        }, { 
         "sale": "215", 
         "year": "2002" 
        }, { 
         "sale": "179", 
         "year": "2004" 
        }, { 
         "sale": "199", 
         "year": "2006" 
        }, { 
         "sale": "134", 
         "year": "2008" 
        }, { 
         "sale": "176", 
         "year": "2010" 
        }]; 


        var vis = d3.select("#visualisation"), 
         WIDTH = 1000, 
         HEIGHT = 500, 
         MARGINS = { 
          top: 20, 
          right: 20, 
          bottom: 20, 
          left: 50 
         }, 
         xScale = d3.scale.linear().range([MARGINS.left, WIDTH - MARGINS.right]).domain([2000, 2010]), 
         yScale = d3.scale.linear().range([HEIGHT - MARGINS.top, MARGINS.bottom]).domain([134, 215]), 
         xAxis = d3.svg.axis() 
         .scale(xScale), 
         yAxis = d3.svg.axis() 
         .scale(yScale) 
         .orient("left"); 

        vis.append("svg:g") 
         .attr("class", "x axis") 
         .attr("transform", "translate(0," + (HEIGHT - MARGINS.bottom) + ")") 
         .call(xAxis); 
        vis.append("svg:g") 
         .attr("class", "y axis") 
         .attr("transform", "translate(" + (MARGINS.left) + ",0)") 
         .call(yAxis); 
        var lineGen = d3.svg.line() 
         .x(function(d) { 
          return xScale(d.year); 
         }) 
         .y(function(d) { 
          return yScale(d.sale); 
         }) 
         .interpolate("basis"); 
        vis.append('svg:path') 
         .attr('d', lineGen(data)) 
         .attr('stroke', 'green') 
         .attr('stroke-width', 2) 
         .attr('fill', 'none'); 
       } 
       InitChart(); 
      </script> 
</body> 

</html>

我想拔出JSON數據，並參考其在index.html作爲實際的JSON數據爲以MB爲單位。所以，我保存的數據，並與HTML和JSON文件在同一目錄中被提及它InitChart（）函數內部作爲

var data = d3.json("linedata.json");

。當我在瀏覽器（firefox）中打開index.html時，我得到一個空白頁面。什麼可能是錯誤？

來源

2016-04-24 Shweta

按F12。你在控制檯看到什麼錯誤？ –

問題：

在一個變量中使用d3.json。 d3.json不返回任何內容（實際上，它返回與請求關聯的對象，與文件內容本身無關）。

解決方案：

使用d3.json(url[, callback])代替。

說明：

D3提供了一種方式來加載JSON文件。你必須這樣做：

d3.json("linedata.json", function(data){ 
    function initChart(){ 
     //all your code for initChart here 
    }; 
    initChart(); 
});

這樣，在JSON文件中的數據相關的參數data，可以在回調函數內部使用。

下面是文檔： https://github.com/mbostock/d3/wiki/Requests#d3_json

來源

2016-04-24 03:14:06

哦完美，它的工作，現在我更清楚d3.json的工作原理。非常感謝。 – Shweta

在d3.js中導入json文件

回答

相關問題