d3 javascript : json 파일 읽기

json 파일을 읽을 d3js에 코드 스 니펫을 작성하고 json 파일의 내용을 기반으로 간단한 막대 차트를 표시하려고합니다. 내 JSON 파일은 mydata.json은 다음과 같습니다 index.html에서d3 javascript : json 파일 읽기

[ 
    {“name”: “Apollo_Diomedes”, “age”: 300}, 
    {“name”: “Bjorn_the_Fellhanded”, “age”: 900}, 
    {“name”: “Jonah_Orion”, “age”: 500} 
]

d3js 코드 조각 : 나는 D3의 V4를 사용하고

<body> 
<script> 
d3.json("mydata.json", function(data) { 

    var canvas = d3.select("body").append("svg") 
     .attr("width", 500) 
     .attr("height", 500) 

    canvas.selectAll("rect") 
     .data(data) 
     .enter() 
      .append("rect") 
      .attr("width", function(x) { return x.age; }) 
      .attr("height", 45) 
      .attr("y", function(x, i) { return i * 50; }) 
      .attr("fill", "blue") 
    }); 
</script> 
</body>

: <script src="http://d3js.org/d3.v4.js"></script>.

index.html 파일을 직접 열어보고 로컬 서버를 열고 으로 이동하여 here으로 시도했습니다. 둘 다 빈 화면 만 보여줍니다. index.html 및 mydata.json은 모두 내 바탕 화면의 동일한 폴더에 저장됩니다.

관심이있는 사용자를 위해 실제로는 this 약간 오래된 YouTube 튜토리얼입니다. 그것은 d3 v3을 실행합니다.

P. CSV에서 정보를 읽을 수는 있지만 json은 읽을 수 없습니다.

출처

2017-02-22 AndreyIto

을 당신은 문제가와가 JSON 데이터를 파싱하는 문제는 JSON 형식의 데이터에서 호출하는 방식이 아니라 단지 "with"로 바뀌고 그냥 잘 작동합니다. '[ { "name": "Apollo_Diomedes", "age": 300} , { "name": "Bjorn_the_Fellhanded", "age": 900}, { "name": "Jonah_Orion", "age": 500} ]' –

JSON 데이터를 구문 분석하는 데 문제가있는 것 같습니다. 영어 사람 (")에 인용 부호를 교체하십시오.

그리고 일반적으로

, 항상. 난 당신이 몇 가지 오류가 인쇄 것이라고 확신합니다 웹 브라우저의 콘솔 로그를 확인하십시오.

출처

2017-02-26 15:24:00

d3 javascript : json 파일 읽기

답변

관련 문제