홈>
이 예 를 기반으로 네트워크 그래프를 만들려고합니다. 내가 가지고있는이 json 파일을 사용해 보았지만 모든 노드를 동시에 표시하지는 않습니다.
{
"name":"Plant",
"children":[
{
"name":"Delonix regia",
"children": [
{
"id" : "Family",
"name" : "Fabaceae",
"size": 10000
},
{
"id" : "Common Name",
"name" : "Semarak api",
"size": 10000
},
{
"id" : "Habitat",
"name" : "Humid",
"size": 10000
}
]
},
{
"name":"Ixora javanica",
"children": [
{
"id" : "Family",
"name" : "Fabaceae",
"size": 10000
},
{
"id" : "Common Name",
"name" : "Bunga air",
"size": 10000
},
{
"id" : "Habitat",
"name" : "Hot",
"size": 10000
}
]
},
{
"name":"Dracaena reflexa",
"children": [
{
"id" : "Family",
"name" : "Asparagaceae",
"size": 10000
},
{
"id" : "Common Name",
"name" : "Pleomele",
"size": 10000
},
{
"id" : "Habitat",
"name" : "Unknown",
"size": 10000
}
]
}
]
}
여기 모습입니다.
다른 부모 노드
Delonix regia
를 클릭하면
또는
Ixora javanica
열린 다른 노드가 닫힙니다.
더 복잡한 다른 json이 있지만 제대로 작동하고 모든 노드가 표시됩니다.
모든 노드를 만들거나 부모 노드 만 표시하려면 어떻게해야합니까?
- 답변 # 1
- 답변 # 2
간단히
"id":
를 삭제하면 필드가 작동합니다. 그렇지 않으면 표시하려는 각 노드에 고유 한 ID를 할당해야합니다.
관련 자료
- xml - xsl - 알 수없는 하위 노드 수를 csv로 변환
- OrgChart - 조직도 - 노드 수정 및 하위 추가 :jquery 사용
- xml - 노드가 속성을 포함하는 특정 노드의 하위 인 경우에만 모든 발생 문자열을 검색하십시오
- c# - 일부 어린이는 스택 패널에 표시되지 않습니다
- getting a node's children that contains a certain tag - 특정 태그가 포함 된 노드의 자식을 얻는 방법 - 자바 스크립트
- reactjs - UISNG 효소를 테스트 할 때 노드의 자식을 읽는 방법
- java - Android Firebase에서 다른 참조의 두 자식 노드를 비교하는 방법은 무엇입니까?
- C ++의 자식 목록이있는 일반 트리에서 주어진 두 노드 사이에 노드 추가 및 경로 비용 찾기
- c# - XML 데이터를 구문 분석하고 각 노드의 하위 값을 업데이트하십시오
예제에서 제공 한 코드를 업데이트하고 json을 데이터 소스로 추가했습니다. 잘 작동합니다-https://jsfiddle.net/zLehvLtd/
코드의 두 곳에서 id를 이름으로 바꿨습니다 :
완전한 트리를 생성하는 다른 방법은 json의 각 객체에 고유 한 "id"를 추가하는 것입니다. 그 이유는 d3.js가 각 객체에 대해 하나 이상의 고유 속성을 가진 중첩 형식의 json을 허용하기 때문입니다.