d3.json을 사용하여 로컬 json 파일을 가져올 수 없음

d3.json을 사용하여 로컬 json 파일을 가져올 수 없음

를 사용하여 로컬 .json 파일을 Import하려고 합니다.d3.json().

파일filename.jsonhtml 파일과 같은 폴더에 저장됩니다.

그러나 (json) 파라미터는 null입니다.

d3.json("filename.json", function(json) {
    root = json;
    root.x0 = h / 2;
    root.y0 = 0;});
    . . . 
}

내 코드는 기본적으로 이 d3.js 예시와 동일합니다.

브라우저에서 실행 중인 경우 로컬 파일을 로드할 수 없습니다.

단, 명령줄에서 개발 서버를 실행하는 것은 매우 간단합니다.cd파일을 포함한 디렉토리에 격납하면, 다음과 같습니다.

python -m SimpleHTTPServer

(또는python -m http.serverpython 3) 사용

이제 브라우저에서localhost:3000(또는:8000또는 명령줄에 표시되는 모든 것)을 클릭합니다.

---

다음은 이전 버전의 d3에서 사용되었습니다.

var json = {"my": "json"};
d3.json(json, function(json) {
    root = json;
    root.x0 = h / 2;
    root.y0 = 0;
});

버전 d3.v5에서는 다음과 같이 해야 합니다.

d3.json("file.json").then(function(data){ console.log(data)});

마찬가지로 csv 및 기타 파일 형식을 사용합니다.

상세한 것에 대하여는, https://github.com/d3/d3/blob/master/CHANGES.md 를 참조해 주세요.

앞의 답변에 덧붙여 대부분의 Linux/Mac 머신에서 제공하는 HTTP 서버를 사용하는 것이 더 간단합니다(파이썬을 설치하는 것만으로).

프로젝트의 루트에서 다음 명령을 실행합니다.

python -m SimpleHTTPServer

접속하는 대신file://.....index.html브라우저를 열다http://localhost:8080또는 서버를 실행함으로써 제공되는 포트.이렇게 하면 브라우저가 차단되지 않고 프로젝트의 모든 파일을 가져올 수 있습니다.

http://bl.ocks.org/eyaler/10586116 이 코드를 참조해 주세요.파일에서 읽고 그래프를 만듭니다.저도 같은 문제가 있었습니다만, 나중에 알고 보니 사용하고 있던 json 파일(여분의 콤마)에 문제가 있었습니다.여기서 아무것도 표시되지 않는 경우는, 다음과 같이 에러를 인쇄해 주세요.

d3.json("filename.json", function(error, graph) {
  alert(error)
})

파이어폭스에서는 동작하고 있습니다만, 크롬에서는 에러가 인쇄되지 않습니다.

(d3)js를 사용하여 로컬 csv 또는 json 파일을 로드하는 것은 안전하지 않습니다.그들은 당신이 그것을 하는 것을 방해합니다.하지만 그것을 작동시키기 위한 몇 가지 해결책이 있습니다.다음 행은 로컬 Import이므로 기본적으로 기능하지 않습니다(csv 또는 json).

d3.csv("path_to_your_csv", function(data) {console.log(data) });

해결책 1: 브라우저에서 보안 비활성화

브라우저마다 비활성화할 수 있는 보안 설정이 다릅니다.이 솔루션은 작동하며 파일을 로드할 수 있습니다.단, 무효로 하는 것은 권장되지 않습니다.모든 종류의 스레드에 취약해집니다.한편, 수동으로 시큐러티를 무효로 하도록 지시하면, 누가 소프트웨어를 사용합니까?

Chrome에서 보안 비활성화:

--disable-web-security
--allow-file-access-from-files

해결책 2: 웹사이트에서 csv/json 파일을 로드합니다.

이것은 이상한 해결책처럼 보일 수 있지만 효과가 있을 것이다.이것은 간단한 수정이지만 실용적이지 않을 수 있습니다.예에 대해서는, 여기를 참조해 주세요.페이지 소스를 확인합니다.아이디어는 다음과 같습니다.

d3.csv("https://path_to_your_csv", function(data) {console.log(data) });

해결책 3: 예를 들어, 사용자 고유의 브라우저를 시작합니다.파이썬.

이러한 브라우저에는 모든 종류의 보안 검사가 포함되어 있지 않습니다.이것은, 자신의 머신으로 코드를 시험하는 경우에, 해결책이 될 수 있습니다.대부분의 경우 사용자가 있는 경우에는 이 방법이 해결책이 되지 않을 수 있습니다.이 예에서는, 포토 8888 로 HTTP 를 사용하고 있는 경우를 제외하고, HTTP 가 동작합니다.

python -m http.server 8888
python -m SimpleHTTPServer 8888 &

(Chrome) 브라우저 주소 표시줄을 열고 아래에 를 입력합니다.그러면 index.html이 열립니다.다른 이름을 가진 경우 해당 로컬 HTML 페이지의 경로를 입력합니다.

localhost:8888

해결책 4: 로컬 호스트 및 CORS 사용

로컬 호스트 및 CORS를 사용할 수 있지만 이 설정은 사용자 친화적이지 않으며 그리 간단하지 않을 수 있습니다.

해결책 5: HTML 파일에 데이터 포함

저는 이 솔루션이 가장 마음에 듭니다.csv를 로드하는 대신 html에 데이터를 직접 삽입하는 스크립트를 작성할 수 있습니다.이것에 의해, 유저는 마음에 드는 브라우저를 사용할 수 있어 시큐러티상의 문제는 없습니다.html 파일은 데이터에 따라 매우 어려워질 수 있기 때문에 이 솔루션은 그다지 우아하지 않을 수 있지만 동작합니다.예에 대해서는, 여기를 참조해 주세요.페이지 소스를 확인합니다.

다음 행을 삭제합니다.

d3.csv("path_to_your_csv", function(data) { })

다음과 같이 대체합니다.

var data = 
    [
        $DATA_COMES_HERE$
    ]

적어도 Chrome에서는 로컬 파일을 쉽게 읽을 수 없고 다른 브라우저에서도 읽을 수 없습니다.

후 JSON 데이터를 입니다.d3.json전화를 걸어 전달한 콜백에 코드를 보관합니다.

그러면 코드는 다음과 같습니다.

json = { ... };

root = json;
root.x0 = h / 2;
root.y0 = 0;
... 

이거 써봤어

d3.json("graph.json", function(error, xyz) {
    if (error) throw error;
    // the rest of my d3 graph code here
    }

변수 xyz를 사용하여 json 파일을 참조할 수 있으며 그래프는 내 로컬 json 파일의 이름입니다.

리소스를 로컬 변수로 사용

var filename = {x0:0,y0:0};
//you can change different name for the function than json
d3.json = (x,cb)=>cb.call(null,x); 
d3.json(filename, function(json) {
    root = json;
    root.x0 = h / 2;
    root.y0 = 0;});
    //...
}

언급URL : https://stackoverflow.com/questions/17214293/importing-local-json-file-using-d3-json-does-not-work