我想从我的计算机上的 JSON 文件加载数据。我知道没有 HTTP 服务器我无法阅读,所以我想创建一个输入字段。我的文件已成功读取,但是当我将数据发送到函数以创建气泡图时,没有创建任何内容。如果我从本地加载它可以工作(我执行一个 HTTP 服务器)。这是代码:
<script type="text/javascript">
var json;
function handleFileSelect(evt) {
var files = evt.target.files;
}
document.getElementById('files').addEventListener('change', handleFileSelect, false);
function handleFileSelect(evt) {
var files = evt.target.files;
var output = [];
for (var i = 0, f; f = files[i]; i++) {
var reader = new FileReader();
reader.onload = (function (theFile) {
return function (e) {
json = JSON.parse(e.target.result);
alert('json global var has been set to parsed json of this file here it is unevaled = \n' + JSON.stringify(json));
initData(JSON.stringify(json)); // Doesn't works
//initData("data.json"); // Works
}
})(f);
reader.readAsText(f);
}
}
document.getElementById('files').addEventListener('change', handleFileSelect, false);
</script>
function initData(data){
d3.json(data, function(error, root) {
if (error) throw error;
var node = svg.selectAll(".node")
.data(bubble.nodes(classes(root))
// .....
这是 Plunker 的在线示例:https ://plnkr.co/edit/T8WFvj0qtMW5mFK6gOjO?p=preview
谢谢。