無法讀取D3中的json

我想讀取使用D3庫的json文件，但是當我嘗試讀取json時，我得到了警報空值（這裏我使用了警報）。無法讀取D3中的json

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>Simple venn.js example</title> 
</head> 

<body> 
    <div id="weighted_example"></div> 
</body> 

<script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.js"></script> 
<script src="https://d3js.org/d3.v4.min.js"></script> 

<script> 
d3.json("file.json", function(json) { 
    alert("JSON Data: " + json); 
}); 
</script> 
</html>

以下是file.json（這已經在網上驗證）

[{ 
     "sets": [0], 
     "size": 1958 
    }, 
    { 
     "sets": [1], 
     "size": 1856 
    }, 
    { 
     "sets": [2], 
     "size": 1297 
    }, 
    { 
     "sets": [0, 1], 
     "size": 220 
    }, 
    { 
     "sets": [2, 0], 
     "size": 123 
    }, 
    { 
     "sets": [2, 1], 
     "size": 139 
    } 
]

如何解決這樣的問題？

來源

2017-05-28 man data

在瀏覽器工具中使用網絡選項卡，並檢查文件正在加載您可能會得到一個404 – saj

其中是file.json？它在同一個目錄中嗎？ –

@ man-data您必須是投注錯誤XMLHttpRequest無法加載「只有協議方案支持跨源請求：http，數據，chrome，chrome擴展名，https。」 –

如果您在瀏覽器中運行，則無法加載本地文件。我建議在線上傳數據，如here，然後用d3.json（）請求它。

Likeso：

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>Simple venn.js example</title> 
</head> 

<body> 
    <div id="weighted_example"></div> 
</body> 

<script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.js"></script> 
<script src="https://d3js.org/d3.v4.min.js"></script> 

<script> 
d3.json("https://gist.githubusercontent.com/kvyb/d482dc15602c34841d4796daa9ed64cb/raw/d737e19c03868adf2f15103fcd98384f4c364785/file.json", function(json) { 
    alert("JSON Data: " + json) 
}); 
</script> 
</html>

否則，你可以硬編碼到HTML文件：

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>Simple venn.js example</title> 
</head> 

<body> 
    <div id="weighted_example"></div> 
</body> 

<script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.js"></script> 
<script src="https://d3js.org/d3.v4.min.js"></script> 

<script> 
var json = [{ 
     "sets": [0], 
     "size": 1958 
    }, 
    { 
     "sets": [1], 
     "size": 1856 
    }, 
    { 
     "sets": [2], 
     "size": 1297 
    }, 
    { 
     "sets": [0, 1], 
     "size": 220 
    }, 
    { 
     "sets": [2, 0], 
     "size": 123 
    }, 
    { 
     "sets": [2, 1], 
     "size": 139 
    } 
] 

alert("JSON Data: " + json) 

</script> 
</html>

如果你不介意使用其他庫，有一個jquery解決加載本地，中其他。

來源

2017-05-28 13:41:01

Vybrial我知道如何使用jQuery，但我需要閱讀使用D3，因爲我使用D3功能。我不能在本地閱讀json。 –

恐怕只有D3纔有辦法。 –

爲了讓這些文件在本地工作，您需要使用HTTP服務器。我個人使用MAMP的Mac機器。

來源

2017-11-19 04:23:32

無法讀取D3中的json

回答

相關問題