栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 面试经验 > 面试问答

如何转换为D3的JSON格式?

面试问答 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

如何转换为D3的JSON格式?

有没有规定的格式,通常可以通过各种访问函数重新定义你的数据(如hierarchy.children)和array.map。但是您引用的格式可能是最方便的树表示形式,因为它可以与默认访问器一起使用。

第一个问题是您打算显示图形还是树。对于图,数据结构是根据节点和链接定义的。对于树,布局的输入是根节点,该根节点可能具有一系列子节点,并且其叶节点具有关联的value。

如果要显示一个 ,而您所拥有的只是一个边列表,那么您将要遍历这些边,以生成一个节点数组和一个链接数组。假设您有一个名为“
graph.csv”的文件:

source,targetA1,A2A2,A3A2,A4

您可以使用d3.csv加载此文件,然后生成节点和链接的数组:

d3.csv("graph.csv", function(links) {  var nodesByName = {};  // Create nodes for each unique source and target.  links.forEach(function(link) {    link.source = nodeByName(link.source);    link.target = nodeByName(link.target);  });  // Extract the array of nodes from the map by name.  var nodes = d3.values(nodeByName);  function nodeByName(name) {    return nodesByName[name] || (nodesByName[name] = {name: name});  }});

然后,您可以传递这些节点并链接到力的布局以可视化图形:

  • http://bl.ocks.org/2949937

如果要生成一 棵树 ,则需要做一些略有不同的数据转换形式,以积累每个父级的子节点。

d3.csv("graph.csv", function(links) {  var nodesByName = {};  // Create nodes for each unique source and target.  links.forEach(function(link) {    var parent = link.source = nodeByName(link.source),        child = link.target = nodeByName(link.target);    if (parent.children) parent.children.push(child);    else parent.children = [child];  });  // Extract the root node.  var root = links[0].source;  function nodeByName(name) {    return nodesByName[name] || (nodesByName[name] = {name: name});  }});

像这样:

  • http://bl.ocks.org/2949981


转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/449177.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号