D3.js--Tree(树)

html：

<div id="relevanceRuleConfig">

CSS：

.node circle {fill: #fff;stroke: steelblue;stroke-width: 1.5px;
}.node {font: 12px sans-serif;
}.link {fill: none;stroke: #ccc;stroke-width: 1.5px;
}

JS：

//定义布局范围
var treeWidth = width-50;
var treeHeight = height-80;
//定义D3树布局范围
var tree = d3.layout.tree().size([treeHeight, treeWidth-100])//注意D3布局跟svg坐标系无关,size(高，宽).separation(function(a, b) { return (a.parent == b.parent ? 1 : 2); });//设置相隔节点的间距，a、b节点相隔//定义连线生成器
var diagonal = d3.svg.diagonal().projection(function(d) { return [d.y, d.x]; });//设置连线点的变换器//绘制svg图形
var svg = d3.select("#relevanceRuleConfig").append("svg").attr("width", treeWidth).attr("height", treeHeight).append("g").attr("transform", "translate(40,0)");//定义偏移量//加载数据
d3.json($WEB_ROOT_PATH+"/jsproject/dqms/rulemanageconfig/data.json", function(error, root) {var nodes = tree.nodes(root);   //获取所有节点信息var links = tree.links(nodes);   //获取节点的连线信息集合//绘制连线var link = svg.selectAll(".link").data(links).enter().append("path").attr("class", "link").attr("d", diagonal);//绘制节点var node = svg.selectAll(".node").data(nodes).enter().append("g").attr("class", "node").attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; })//添加节点图标node.append("circle").attr("r", 4.5);//添加节点显示文本node.append("text").attr("dx", function(d) { return d.children ? -8 : 8; })//定义文本显示x轴偏移量.attr("dy", 3)//定义文本显示y轴偏移量.style("text-anchor", function(d) { return d.children ? "end" : "start"; })//文字对齐显示.text(function(d) { return d.name; });
});

JSON文件（data.json）：

{
"name":"中国",
"children":
[{ "name":"浙江" , "children":[{"name":"杭州" },{"name":"宁波" },{"name":"温州" },{"name":"绍兴" }] },{ "name":"广西" , "children":[{"name":"桂林","children":[{"name":"秀峰区"},{"name":"叠彩区"},{"name":"象山区"},{"name":"七星区","children":[{"name":"哈尔滨"},{"name":"齐齐哈尔"},{"name":"牡丹江"},{"name":"大庆"}] }]},{"name":"南宁"},{"name":"柳州"},{"name":"防城港"}] },{ "name":"黑龙江","children":[{"name":"哈尔滨"},{"name":"齐齐哈尔"},{"name":"牡丹江"},{"name":"大庆"}] },{ "name":"新疆" , "children":[{"name":"乌鲁木齐"},{"name":"克拉玛依"},{"name":"吐鲁番"},{"name":"哈密"}]}
]
}

效果图：

D3.js--Tree(树)相关推荐

html树图制作,d3.js制作树结构图
一.运行效果说明:使用鼠标滚轮放大缩小,点解节点可以收缩打开子节点,按住鼠标左键拖动可移动整体图形. 二.实现过程 1.编写html和css结构 .node { ursor: pointer; } ...
用D3.js画树状图
做项目遇到一个需求,将具有层级关系的词语用树状图的形式展示它们之间的关系,像这样: 或者是这样: 上面的图片只是样例,跟我下面的代码里面用的数据不同网上有很多这种数据可视化展示的js控件,我这里选择 ...
d3.js Tree
一.功能: 1.增加节点 2.删除节点 3.上下移动节点 4.保存 5.画布可放大缩小 6.单击节点选中,双击节点折叠二.知识点: 1.D3. ...
D3.js树图tree 组织机构分布图(基于vue)
@[TOC](D3.js树图tree 组织机构分布图(基于vue)) 背景前段时间接到一个需求,仿照企业查查->企业族谱使用d3画出企业关系树图.这也是本人第一次接触d3.js,总体来说就是 ...
基于vue的组织架构树组件_Vue组件基于D3.js布局显示树
基于vue的组织架构树组件 Vue.D3.tree (Vue.D3.tree) Update documentationVue components to display graphics based ...
d3.js v3版本实现-树状图
参考的例子:http://bl.ocks.org/robschmuecker/7880033 一.为什么选择d3.js 二.d3.js概述三:树状图实现 1.创建svg 2.在svg元素里面画一个g ...
基于D3.js实现分类多标签的Tree型结构可视化
全文共5270个字,4张图,预计阅读时间25分钟. 关键词: 可视化,D3.js,python,前端,代码 why 今天新来的实习生需要对部分分类文本进行多标签的检测,即根据已构建好的一.二级标签Ex ...
D3.js绘制竖向组织架构图
d3新手上路,记个笔记(*^_^*) 先上效果图: 主要参考:https://bl.ocks.org/mbostock/3184089 https://github.com/justincy/d3-p ...
数据可视化利器D3.js教程 API
汇智网 http://xc.hubwiz.com/course/54fd40cfe564e50d50dcf284 D3.js 入门系列 - 选择元素和绑定数据 https://www.cnblogs. ...
3、Spark 和 D3.js 分析航班大数据
实验资源 1998.csv airports.csv 实验环境 VMware Workstation Ubuntu 16.04 spark-2.4.5 scala-2.12.10 实验内容 " ...

D3.js--Tree(树)

D3.js--Tree(树)相关推荐

最新文章

热门文章