如何创建一个与D3.js树形图｜ Developer.com - 188bet真人

　　D3-short对于数据驱动的文件是一个非常成功的JavaScript-powered数据可视化库,支持大量的特性包括动画,DOM事件,分析、计算,和更多。它有各种各样的对象来表示任何数据结构你可以想象。这些包括通常的嫌疑人,如线和条形图,以及其他一些复杂的数据表示像散点图、系统树图,hexbin地图,桑基和受欢迎。在今天的文章中,我们将使用D3。js显示数据集使用树布局。

　　“树布局”不是一个不同类型的图表本身。相反,它是一种类型的D3家族的层次布局。其他布局类型包括集群和treemap。树型布局产生“node-link”图,列出了节点之间的连接的方式显示的关系一个节点到另一个亲子的方式。

　　图1:一个样本树布局图

　　为了达到目的,你的数据必须以某种方式结构化,这样孩子父对象的数组。这是我们的基本数据集演示:

　　const treeData ={“名称”:“夜”,“孩子们”:[{“名称”:“该隐”},{“名称”:“赛斯”,“孩子们”:[{“名称”:“以挪士”},{“名称”:“诺姆”}]},{“名称”:“伯”},{“名称”:“Awan”,“孩子们”:[{“名称”:“以诺”}]},{“名称”:“Azura”}]};

　　虽然没有严格的要求,我们可以为每个节点分配额外的属性,以确定它的颜色,大小,形状,以及连接:

　　const treeData ={“名称”:“夜”,“价值”:15日“类型”:“黑色”,“水平”:“黄”,“孩子们”:[{" name ":“该隐”、“价值”:10“类型”:“灰色”、“水平”:“红色”},{“名称”:“赛斯”,“价值”:10“类型”:“灰色”、“水平”:“红色”,“孩子们”:[{" name ":“以挪士”,“价值”:7.5,“类型”:“灰色”、“水平”:“紫色”},{“名称”:“诺姆”,“价值”:7.5,“类型”:“灰色”、“水平”:“紫色”}]},{“名称”:“伯”,“价值”:10“类型”:“灰色”、“水平”:“蓝色”},{“名称”:“Awan”,“价值”:10“类型”:“灰色”、“水平”:“绿色”,“孩子们”:[{" name ":“伊诺克”,“价值”:7.5,“类型”:“灰色”、“水平”:“橙色”}]},{“名称”:“Azura”,“价值”:10“类型”:“灰色”、“水平”:“绿色”}]};

　　我们可以称之为d3.hierarchy()方法将数据分配给使用父子关系层次结构,然后将节点数据映射到树布局从那里:

　　/ /声明一个树布局和分配大小const treemap = d3.tree ()。(高度、宽度)大小();让节点= d3。层次结构(treeData d = > d.children);= treemap节点(节点);

　　这是一个好主意来添加每个节点作为一个团体,这样他们就可以后来被引用。下面的代码也分配一些类的每个节点一根,另一个用于子节点:

　　const节点= g.selectAll (“.node”) . data (nodes.descendants ()) .enter () .append .attr (“g”)(“阶级”,d = >“节点”+ (d。孩子吗?:“节点——内部节点——叶”).attr(“变换”,d = >“翻译(“+ d。y +”、“+ d。x +”)”);

　　这是父节点和子节点的代码链接在一起。最后一个函数修改d属性,它定义了一个路径,得出是弯曲的,而不是一条直线:

　　= g.selectAll常量链接(link) . data (nodes.descendants () .slice (1) .enter () .append .attr(“路径”)(“阶级”,“链接”).style(“中风”,d = > d.data.level) .attr (d, d = >{返回“M”+ d。y +”、“+ d。x +“C”+ (d。y + d.parent.y) / 2 +”、“+ d。x + " " + (d。y + d.parent.y) / 2 +”、“+ d.parent。x + " " + d.parent。y +”、“+ d。parent.x; });

　　正如前面所提到的,我们可以使用各种数据属性来确定每个节点的外观和行为。

　　node.append(“圈”).attr (r d = > d.data.value) .style(“中风”,d = > d.data.type) .style(“填满”,d = > d.data.level);

　　每个数据点的值显示为一个节点标签。必须采取特别注意位置标签,清除连接链接。

　　node.append .attr(“文本”)(“dy”、“.35em”) .attr (d = > d“x”。孩子吗?(d.data。值+ 5)* 1:d.data。值+ 5).attr (d = > d“y”。孩子& & d.depth ! = = 0 ?- (d.data。值+ 5):d) .style(“文本链接”,d = > d。孩子吗?“结束”:“开始”)。text (d = > d.data.name);

　　这是最后一个图的色彩斑斓的荣耀。

　　图2:最后的图

　　所有的源代码Codepen让你大饱眼福。享受吧!

本文 zblog模板 原创，转载保留链接！网址：https://liangkeke.com/post/3429.html