d3js树状图tree

Posted 2020-09-01 Tammiel

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了d3js树状图tree相关的知识，希望对你有一定的参考价值。

使用ds.js画出树状图，样式可自定义。以下是效果图

技术分享

介绍下过程：

使用d3.js
初始化d3和画布大小，tree = d3.layout.cluster().size([h, w])
导入数据，使用d3默认处理数据： root = tree.nodes(data)
处理数据（包括坐标的处理）
展示数据

html代码如下，需要引用d3.js即可

<html>
<head>
	<title></title>
</head>
<body>
<js href="/Public/plugins/d3js/d3.min.js" />
<style type="text/css">
#body{
	height: 500px;
	width: 500px;
}
/*d3js*/
.node circle {
	cursor: pointer;
	fill: #fff;
	stroke: steelblue;
	stroke-width: 1.5px;
}

.node text {
	font-size: 11px;
	cursor: pointer;
}

path.link {
	fill: none;
	stroke: #ccc;
	stroke-width: 1.5px;
}

</style>

<div id="body" class="body">
	<div id="footer">
		<button onclick="updateinfo()">Click me</button>
	</div>
</div>

<script type="text/javascript">



updateinfo();

function updateinfo(){
	var json ={"r":{"name":"flare","children":[{"name":"animate","children":[{"name":"Easing"},{"name":"FunctionSequence"},{"name":"ISchedulable"},{"name":"Parallel"},{"name":"Parallel2"},{"name":"Parallel4"},{"name":"Parallel6"},{"name":"Pause"}]}]},"l":{"name":"flare","children":[{"name":"query","children":[{"name":"AggregateExpression","pos":"l"},{"name":"And","pos":"l"},{"name":"Arithmetic","pos":"l"},{"name":"fasdfasdf","pos":"l"},{"name":"Arithmasdfasetic","pos":"l"},{"name":"dfasdfa","pos":"l"}],"pos":"l"}]}};
	var d3js = function(json){
			var objRight = json[‘r‘] ? json[‘r‘] : {};
			var objLeft  = json[‘l‘] ? json[‘l‘] : {};
			d3jsTree(‘#body‘,objRight,objLeft);
		}
	d3js(json);
}

// d3js tree
function d3jsTree(aim,objRight,objLeft){
    // $(aim+‘ svg‘).remove();
    var m = [20, 120, 20, 120],
        w = 1280 - m[1] - m[3],
        h = 600 - m[0] - m[2],  //靠左
        i = 0;

    var tree = d3.layout.cluster().size([h, w]);

    var diagonal = d3.svg.diagonal().projection(function(d) { return [d.y, d.x]; });

    var vis = d3.select(aim).append("svg:svg")
                .attr("width", 1200)
                .attr("height", h + m[0] + m[2])
                .append("svg:g")
                .attr("transform", "translate(" + h + "," + m[0]+")");// translate(靠左，靠上)
    
    update(objRight,objLeft);function init_nodes(left){
        left.x0 = h /2;
        left.y0 =0;var nodes_dic =[];var left_nodes = tree.nodes(left);return left_nodes;}function update(source,l){var duration = d3.event && d3.event.altKey ?5000:500;// Compute the new tree layout.var nodes = init_nodes(source);var left_nodes = init_nodes(l);// if( l !=)var len = nodes.length;for(var i in left_nodes ){
            nodes[len++]= left_nodes[i];}// Normalize for fixed-depth.
        nodes.forEach(function(d){
            tmp =1;if( d.pos ==‘l‘){ tmp =-1;}
            d.y = tmp * d.depth *200;// 线条长度，也是作于方向// d.x = d.l * 63;});// Update the nodes…var node = vis.selectAll("g.node").data(nodes,function(d){return d.id ||(d.id =++i);});// Enter any new nodes at the parent‘s previous position.var nodeEnter = node.enter().append("svg:g").attr("class","node").attr("transform",function(d){return"translate("+ source.y0 +","+ source.x0 +")";}).on("click",function(d){ alert(d.name);});// 点击事件// .on("click", function(d) { ajax_get_server(d.name);console.log(d);toggle(d); update(d,l); });

        nodeEnter.append("svg:circle").attr("r",1e-6).style("fill",function(d){return d._children ?"lightsteelblue":"#fff";});

        nodeEnter.append("svg:text").attr("x",function(d){return d.children || d._children ?-10:10;}).attr("dy",".35em").attr("text-anchor",function(d){return d.children || d._children ?"end":"start";}).text(function(d){return d.name;}).style("fill-opacity",1e-6);// Transition nodes to their new position.var nodeUpdate = node.transition().duration(duration).attr("transform",function(d){return"translate("+ d.y +","+ d.x +")";});

        nodeUpdate.select("circle").attr("r",4.5).style("fill",function(d){return d._children ?"lightsteelblue":"#fff";});

        nodeUpdate.select("text").style("fill-opacity",1);// Transition exiting nodes to the parent‘s new position.var nodeExit = node.exit().transition().duration(duration).attr("transform",function(d){return"translate("+ source.y +","+ source.x +")";}).remove();

        nodeExit.select("circle").attr("r",1e-6);

        nodeExit.select("text").style("fill-opacity",1e-6);// Update the links…var link = vis.selectAll("path.link").data(tree.links(nodes),function(d){return d.target.id;});// Enter any new links at the parent‘s previous position.
        link.enter().insert("svg:path","g").attr("class","link").attr("d",function(d){var o ={x: source.x0, y: source.y0};return diagonal({source: o, target: o});}).transition().duration(duration).attr("d", diagonal);// Transition links to their new position.
        link.transition().duration(duration).attr("d", diagonal);// Transition exiting nodes to the parent‘s new position.
        link.exit().transition().duration(duration).attr("d",function(d){var o ={x: source.x, y: source.y};return diagonal({source: o, target: o});}).remove();// Stash the old positions for transition.
        nodes.forEach(function(d){
            d.x0 = d.x;
            d.y0 = d.y;});}// Toggle children.function toggle(d){if(d.children){
            d._children = d.children;// 闭合子节点
            d.children =null;}else{
            d.children = d._children;// 开启子节点
            d._children =null;}}}</script></body></html>

以上是关于d3js树状图tree的主要内容，如果未能解决你的问题，请参考以下文章

tree树状图表格的呈现，数据结构

JavaScript：基于任意JSON动态生成树状图（动态生成vue-giant-tree所需idpid）

详解树状结构图 vue-org-tree

threejs+d3js 绘制3D动态数据图