如何从 JSON 扩展子项，单击父级 - D3.Js - 强制定向布局后加载数据

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

本文关键字：Js D3 数据 加载 布局 扩展 JSON 单击      更新时间：2023-09-26

我想用这个例子http://bl.ocks.org/mbostock/1093130

链接Collapsible Force Layout，并在首次加载时从 JSON 加载所有节点。

问题：

我想在单击

父节点后加载子节点，并在单击后展开。

当折叠每个节点时，销毁所有节点都作为子节点。

如何实施想法？

注意：我的图表很大，网络浏览器没有响应加载。现在我想逐渐加载/销毁数据。

你必须这样做：

单击节点时，获取与节点关联的子节点：

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

以下是我的 ajax 调用，用于根据父节点加载其子节点"https://gist.githubusercontent.com/cyrilcherian/b9bcb0fdc398bd691641/raw/11a79edf99511cf040ffcb98ae9c30895798ae5e/flare.json"

此处的工作代码

您需要单击 flare/cluster/graph/分析节点以通过 ajax 加载其子节点。

希望这有帮助！

相关文章：