從具有切換節點的D3樹布局創建jsTree

Question

我正在嘗試學習有關D3和jquery的更多信息，所以請原諒任何錯誤。

我已經成功地“混合”了d3樹的布局以提供可縮放的樹布局，但是現在我想構建一個jstree，用戶可以在其中切換開/關某些節點以顯示樹中細節的最低粒度（當前單擊功能可防止樹下降到該紋理）。

我能夠將第二個事件的點擊事件重定向到最低級別，如下所示：

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);
                }
            } 
        }

然后，在我認為的toggleNode函數中，我需要“構建”一個可以傳遞給jsTree的JSON對象，以構建樹，但是恐怕這會超出我的理解范圍。 有人可以幫助我嗎？

我在這里准備了一個完全工作的小提琴。

我不確定如何在同一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 。 必須有一種更優雅的方式來完成此任務。

我剛剛編寫了這個toggleNode函數來處理將d3對象解析為jsTree的JSON格式

    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);

    }