D3가 개체 목록에서 그래프를 렌더링하지 않습니다?

다음 코드와 관련된 문제가 발생했습니다. 나는 수많은 것을 시도해 보았지만 답을 찾기 위해 높고 낮게 찾았지만 아무 소용이 없었다. 여기에 내가 그리려고 노력하고있는 데이터가 : 그래서 데이터가 문제가되지 않습니다 확신D3가 개체 목록에서 그래프를 렌더링하지 않습니다?

{ 
    "x":[1,2,3,4,5,6,7], 
    "y":[8,9,10,11,12,13,14] 
}

그것은 도구의 유효성을 검사 JSONLint을 준수합니다 : 그것은이다 https://gist.github.com/caffinatedmonkey/5714631

는 다음과 같은 형식입니다.

코드와 요점은 여기에 있습니다 : https://gist.github.com/caffinatedmonkey/5714631

이 응용 프로그램에서 나는 자바 스크립트 라이브러리 d3.v3.min.js을 사용했다. 이 데이터를 D3으로 그래프로 표시하는 것이 어떻게 가능할까요? 그렇다면 어떻게해야할까요? 객체의 배열로 작업 할 때

출처

2013-06-05 0xcaff

D3 가장 잘 작동합니다. 나는 다음과 같습니다 귀하의 원시 데이터를 구조 조정 제안 :

[{x:1, y:2}, {x:2, y:100}, {x:3, y: 321}, ect}]

지금은

.selectAll("li") 
.data(data)

는 '리'요소에 데이터 배열의 각 요소에 합류한다. 데이터는 다음과 같다 버젼 :

[ 
    "x":[1, 2, 3, ect], 
    "y:[2, 100, 321, ect] 
]

가입 "X"및 "Y"단지 두 가지 요소가있다. 당신이

.text(function (d, i){ 
     console.log(d.x[i]);

부동산의 X 각 요소를 검색 할 때 'd는 그냥 배열이기 때문에이 존재하지 않습니다. D3는 오브젝트의 어레이에 가장 적합하기 때문에

출처

2013-06-05 17:36:25

data.x[i]하여 해당 요소를 볼 수? 이 형식의 데이터는 파일 크기가 거의 두 배가됩니다! – 0xcaff

어떻게 알았습니까? 디버거를 사용 했습니까? 나는 D3가 처음이다. 감사! 당신은 파일 크기가 염려되는 경우 – 0xcaff

, 나는 데이터의 CSV 생성 권하고 싶습니다 (즉 주석에서 어떻게 보일지 보여주기 위해 열심히,하지만 너무 복잡하지 않습니다) 및 d3.csv 클라이언트 측과로드 위에서 제안한 데이터 구조와 동일한 데이터 구조를 만듭니다. –

는 원 데이터를 재구성하는 것이 가장 것이다. 원시 데이터를 재구성하는 것이 옵션이 아니라면 런타임에 데이터를 즉석에서 재구성 할 수 있습니다.

당신이 일부 스크립트를 변경하면 그대로 당신은 또한 사용할 수있는 데이터를 변경하지 않으려면 The code in this fiddle should do the trick.. 대신 .data() 기능에 data를 전달하는 data.x 또는 data.y를 전달합니다. 이렇게하면 당신은 당신이 데이터를 포맷하지 않고 작업을 할 수있는 방법은 없습니다 확실한가 Here is a fiddle demonstrating this.

출처

2014-01-04 00:36:27 0xcaff

D3가 개체 목록에서 그래프를 렌더링하지 않습니다?

답변

관련 문제