Question

我在d3.js上开发了一个webapp，该webapp根据从本地json（位于本地目录中）提取的数据绘制网络图。该代码在Firefox和IE上运行正常，但在chrome上却遇到问题。 d3.js无法在chrome上加载json。我为此检查了其他线程，但无济于事。

这是代码段：

    d3.json("graph.json", function(graph) {

这是我正在处理的完整代码。 JSFIDDLE：d3_graph.js

这里是JSON数据：

    {
"FILE":[
            "hhh"
        ],
"vertices":[
            {"name":"NE21", "full_name":"NE2", "type":2, "extraInfo":"world"},
            {"name":"NE1", "full_name":"NE1", "type":2, "extraInfo":"world"},
            {"name":"NE3", "full_name":"NE3", "type":2, "extraInfo":"world"},
            {"name":"NE4", "full_name":"NE4", "type":2, "extraInfo":"world"},
            {"name":"NE5", "full_name":"NE5", "type":2, "extraInfo":"world"},
            {"name":"", "full_name":"", "type":4, "extraInfo":""},
            {"name":"", "full_name":"", "type":4, "extraInfo":""}
        ],
"edges":[
            {"source":1, "target":2, "value":1, "distance":20, "sIntfId":"102", "tIntfId":"102", "extraInfo":"hello"},
            {"source":0, "target":4, "value":1, "distance":20, "sIntfId":"122", "tIntfId":"102", "extraInfo":"hello"},
            {"source":0, "target":1, "value":1, "distance":20, "sIntfId":"102", "tIntfId":"115", "extraInfo":"hello"},
            {"source":0, "target":6, "value":1, "distance":20, "sIntfId":"135", "tIntfId":"0", "extraInfo":"hello"},
            {"source":2, "target":3, "value":1, "distance":20, "sIntfId":"122", "tIntfId":"115", "extraInfo":"hello"},
            {"source":0, "target":5, "value":1, "distance":20, "sIntfId":"115", "tIntfId":"0", "extraInfo":"hello"},
            {"source":1, "target":3, "value":1, "distance":20, "sIntfId":"122", "tIntfId":"102", "extraInfo":"hello"}
        ]
    }

Answer 1

出于安全原因，Chrome阻止加载本地文件。

使用简单的Web服务器运行诸如Tomcat之类的项目。还提供了许多chrome Web服务器扩展。

一个危险的解决方案是，如果您不想使用Web服务器，请重新启动（以关闭所有chrome实例）您的PC并运行：

> "C:\PathTo\Chrome.exe" --allow-file-access-from-files

d3.js无法在chrome上加载我的json，但是firefox和IE正常运行

1 个答案: