면책 조항 : 저는 D3을 매우 신중하게 사용하고 있으므로 가능하다고 확신하지만 아직 무엇을 검색해야할지 파악하지 못했습니다.D3으로 중첩 된 객체를 처리하는 방법
중첩 된 JSON 개체/배열로 구성된 하나의 큰 배열을 가져 오는 D3을 사용하여 시각화를 만들려고합니다. 이제
var arr = [
{
"name":"John",
"info":[
{
"age":31,
"height":6,
"weight":155,
"eyes":"green"
},
{
"age":35,
"height":6,
"weight":165,
"eyes":"green"
}
]
},
{
"name":"Eric",
"info":[
{
"age":29,
"height":5,
"weight":135,
"eyes":"brown"
},
{
"age":30,
"height":5,
"weight":155,
"eyes":"brown"
}
]
}
]
, 나는이 데이터를 가지고 그것을 시각화,하지만 개체의 중첩 수준을 반영하기보다는 스타일에 대한 더 많은 된 div를 사용할 필요가하고 싶은 말은 예를 위해,의 내 목적은 다음과 같습니다 가정 해 봅시다 . 그래서 저는 다음과 같습니다 코드합니다 : I 추가 된 div를 가지고 있지 않은 경우 지금
<div>
<h1>John</h1>
<div>
<div>
<div>
<h2>Age:31</h2>
<div>
<p>Weight:155</p>
</div>
</div>
<div>
<h2>Age:35</h2>
<div>
<p>Weight:165</p>
</div>
</div>
</div>
</div>
</div>
<div>
<h1>Eric</h1>
<div>
<div>
<div>
<h2>Age:29</h2>
<div>
<p>Weight:135</p>
</div>
</div>
<div>
<h2>Age:30</h2>
<div>
<p>Weight:155</p>
</div>
</div>
</div>
</div>
</div>
는,
var visualization = d3.select("body").selectAll("div")
.data(arr)
.enter()
.append("div");
var person = visualization.selectAll("h1")
.data(function(d){return(d.name)}
.enter()
.append("h1")
.text(function(d){return d});
를 사용하는 매우 간단한 것을 그리고 나는 동일한 기능을 수행 할 수 divs 및 d.info를 반복하여 필요한 것을 만듭니다. 그러나 중첩 된 div를 추가 할 때 더 이상 루프의 부모 데이터를 사용할 수 없으며 .data()를 통해 자동 반복에서 상위 div의 인덱스를 찾을 수없는 것처럼 보입니다.
정말 내가 원하는 것은 arr []의 길이에 따라 div를 만들고 div에 "name"과 같은 정보를 추가 한 다음 양식 div의 일부 div를 루트 div에 추가 한 다음 루핑을 위해 그 루트 div의 데이터로 돌아 가라. D3을 사용하여이 작업을 수행하고 싶습니다.이 작업은 내장 된 것임을 알고 있기 때문에이 시점에서 나는 내가 사용하고있는 인덱스를 알고 있고 더 많은 작업에 사용할 수있는 루프를 사용하여 강제로 처리 할 준비가되었습니다. 중첩 된 데이터. 희망적으로는 의미가 있지만, D3을 사용하여 올바르게 수행하는 방법에 완전히 매달 렸습니다.
이 내용이 분명하지 않은지 궁금한 점이 있으시면 알려 주시기 바랍니다. 감사!