토글 노드가있는 D3 트리 레이아웃에서 jsTree 만들기

Question

D3 및 jquery에 대해 더 자세히 배우려고하므로 실수를 저 지르십시오.

나는 d3 트리 레이아웃을 확대/축소 트리 레이아웃에 성공적으로 "리믹스"했지만, 사용자가 특정 노드를 켜고 끌 수있는 jstree를 작성하여 세부 사항의 가장 낮은 그레인을 표시하고자합니다. 트리 (현재 클릭 기능은 트리가이 그레인으로 떨어지는 것을 방지합니다). , 내가 JSON "을 구축"할 필요가 나는 toggleNode 기능에 생각에서 그런

function click(d) { 
      if (d.depth != 4) { 
       if (d.children) { 
        d._children = d.children; 
        d.children = null; 
       } else { 
        d.children = d._children; 
        d._children = null; 
       } 
       update(d); 
      } 
      else 
      { 
       var circle = d3.select(this).selectAll("circle"); 
       var togglestate; 
       console.log(circle.style("fill")); 
       if (circle.style("fill") == "#b0c4de") { 
        togglestate="on"; 
        circle.style("fill","red"); 
        toggleNode(togglestate,d); 
       } 
       else { 
        togglestate="off"; 
        circle.style("fill","lightsteelblue"); 
        toggleNode(togglestate,d); 
       } 
      } 
     } 

:

은이 같은 다른 기능에 가장 낮은 수준으로 2 차에 클릭 이벤트를 리디렉션 할 수 있었다 트리를 만들기 위해 jsTree에 전달할 수있는 객체이지만, 이것이 내 이해의 한계를 밀고 있습니다. 누군가 나를 교육시킬 수 있습니까?

나는 완전히 작동하는 바이올렛 here을 만들었습니다.

나는 같은 jsfiddle에 jstree를하는 방법을 잘 모르겠어요,하지만 난 jstree 웹 사이트에서 JSON 형식이 같은 것을 말할 수 있습니다 :

$('#using_json').jstree({ 'core' : { 
    'data' : [ 
     'Simple root node', 
     { 
     'text' : 'Root node 2', 
     'state' : { 
      'opened' : true, 
      'selected' : true 
     }, 
     'children' : [ 
      { 'text' : 'Child 1' }, 
      'Child 2' 
     ] 
     } 
    ] 
} }); 

은 어떻게 든 나는이 두 부분을 접착제 필요 함께. 다시 한 번 결과를 얻을 수있는 더 좋은 방법이 있다고 확신하지만 아직 발견하지 못했습니다.

Answer 1

나는 스스로 해결할 수있었습니다. 다음은 최종 솔루션이 포함 된 jsfiddle입니다. 이 일을 처리하는 좀 더 우아한 방법이 있어야합니다.

난 그냥 다른 사람들에 대한하지 확인 jsTree

function toggleNode(togglestate,data) 
    { 
     var cleanchild = new Array(); 
     data._children.forEach(function (d) { cleanchild.push({text: d.name + "-" + d.DET_TYPE + "-" + d.DET_DATE}) }); 
     jtree = { core: { data: [ {text: data.name,children: cleanchild } ] } }; 
     console.log(JSON.stringify(jtree)); 
     //$('#jstree').jstree(jtree); 

    }