如何從JSON擴展子,在單擊父- D3后加載數據。強制布局。

[英]How to expand child from JSON, load data after click parent - D3.Js - force directed layout


I want to use this example http://bl.ocks.org/mbostock/1093130

我想使用這個示例http://bl.ocks.org/mbostock/1093130

Link is Collapsible Force Layout and load all nodes from JSON in first loading.

Link是可折疊的強制布局,在第一次加載時從JSON加載所有節點。

Question:

問題:

I want to load child after click parent's node and expand after click.

我想在單擊父節點后加載子節點,單擊后展開。

When collapse each node, destroy all nodes are as child.

當折疊每個節點時,銷毀所有節點作為子節點。

How to implement idea?

如何實現主意嗎?

Note: my graph is huge and web browser doesn't respond to load. Now I want to load/destroy data gradually.

注意:我的圖表很大,web瀏覽器不響應加載。現在我想逐漸加載/銷毀數據。

1 个解决方案

#1


1  

You have to do it like this:

你必須這樣做:

On click of the node fetch the children associated with the node:

單擊節點獲取與節點關聯的子節點:

function getMyData(d) {
  //return the url for the parent node.
  if (d.name == 'graph') {
    return "https://gist.githubusercontent.com/cyrilcherian/231657f6c86d540adf64/raw/375f89aaa65d16bbbda904c7f17a132face1a7d6/graph_children.json";
  } else if (d.name == 'cluster') {
    return "https://gist.githubusercontent.com/cyrilcherian/dbf9f0b2180201e4cdbe/raw/a7e6361349fe06b6c16f7f376d07dae36da89848/cluster_children.json";
  }  else if (d.name == 'analytics') {
    return "https://gist.githubusercontent.com/cyrilcherian/0efc76bd75386bf89961/raw/5d32ea77f1d34e8ca40f749ce9d501669e8563a4/analytic_children.json";
  } else if (d.name == 'flare') {
    return "https://gist.githubusercontent.com/cyrilcherian/b9bcb0fdc398bd691641/raw/11a79edf99511cf040ffcb98ae9c30895798ae5e/flare.json";
  } else
    return [];
}

// Toggle children on click.
function click(d) {

  if (d3.event.defaultPrevented) return; // ignore drag
  if (d.children) {
    d.children = null;
    update();
  } else {
    //do your ajax call to get the chldren

    var url = getMyData(d);
    d3.json(url, function(error, json) {
      d.children = json;
      update();//update on ajax success.
    })

  }

}

Here these are my ajax calls to load its children based on the parent node "https://gist.githubusercontent.com/cyrilcherian/b9bcb0fdc398bd691641/raw/11a79edf99511cf040ffcb98ae9c30895798ae5e/flare.json"

這里是我基於父節點“https://gist. githuercontent.com/cyrilcherian/b9bcb0fdc398bcbd691641/raw/11a79edf99511cf9fcb98ae9c30895798808ae5e/flare.json”加載子節點的ajax調用。

Working code here

工作代碼在這里

You need to click the flare/cluster/graph/analytics node to load its children via ajax.

您需要單擊flare/cluster/graph/analytics節點以通過ajax加載其子節點。

Hope this helps!

希望這可以幫助!


注意!

本站翻译的文章,版权归属于本站,未经许可禁止转摘,转摘请注明本文地址:https://www.itdaan.com/blog/2016/02/06/720275bd0ccedcefd495f1ffe3d3cade.html



 
粤ICP备14056181号  © 2014-2020 ITdaan.com