D3.js--Tree(树)

来源：互联网发布：网络调查赚钱编辑：程序博客网时间：2024/06/11 00:16

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":"哈密"}]}]}

效果图：

0 0