>

이 예 를 기반으로 네트워크 그래프를 만들려고합니다. 내가 가지고있는이 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

    예제에서 제공 한 코드를 업데이트하고 json을 데이터 소스로 추가했습니다. 잘 작동합니다-https://jsfiddle.net/zLehvLtd/

    코드의 두 곳에서 id를 이름으로 바꿨습니다 :

    // Update links.
     link = link.data(links, function(d) { return d.target.name; });
    // Update nodes.
    node = node.data(nodes, function(d) { return d.name; });
    
    
    완전한 트리를 생성하는 다른 방법은 json의 각 객체에 고유 한 "id"를 추가하는 것입니다. 그 이유는 d3.js가 각 객체에 대해 하나 이상의 고유 속성을 가진 중첩 형식의 json을 허용하기 때문입니다.

  • 답변 # 2

    간단히 "id": 를 삭제하면  필드가 작동합니다. 그렇지 않으면 표시하려는 각 노드에 고유 한 ID를 할당해야합니다.

  • 이전 MainActivity Android Studio에서 오류 발생
  • 다음 php - 빈 파일을 반환하는 phpexcel을 사용하여 Excel 파일을 PDF로 변환