d3.js组织机构图 在rect中显示文字，批量显示

1、json数据：var 蟠校盯昂dataset = { name: "总公司", detail: [ { name: "子公司", detail: [ { name: '分公司' } ] }, { name: ' 子公司', detail: [ { name: '子公司', detail: [ { name: '分公司' }, { name: '分公司' }, { name: '分公司' } ] }, { name: '子公司', detail: [ { name: '分公司' }, { name: '分公司' } ] } ] } ] }

2、//引用d3.js:<script src="d3/d3.js"></script>

3、//各种数据准备 var _Hierarchydata = d3.hierarchy(dataset, function (d) { return d.detail; }) //数据 var _Tree = d3.tree() //树 .size([800, 500]); var _Tree_Data = _Tree(_Hierarchydata); var _Node_Data = _Tree_Data.descendants();//节点数据 var _Tree_Link = _Tree_Data.links();//连线数据

4、//画布var _Svg = d3.select("body") .append("svg") .attr("width", "1200") .attr("height", "700")

5、//g元素下面添加rect，这样，通过F12可以看到，每个g元素下只有一个rectvar _G 屏顿幂垂= _Svg.selectA造婷用痃ll('g') .data(_Node_Data) .enter() .append('g') .append('rect') .attr('width', 100).attr('height', 100) .attr('x', function (d) { return d.x-15; }) .attr('y', function (d) { return d.y; }) .attr('width', function (d, i) { return 50; }) .attr('height', function (d, i) { return 30; })

6、//text元素，用来显示文字 其中var _G = _svg.selectAll('g争犸禀淫')必须要重新写一遍，不用使用_G.append('text&垆杪屑丝#39;)，会导致数据不显示。 var _G = _Svg.selectAll('g') .enter() .append('text').data(_Node_Data).enter().append('text') .attr('x', function (d) { return d.x - 12; }) .attr('y', function (d) { return d.y + 20; }) .text(function (d, i) { return d.data.name; }) .attr('fill', 'white')

7、//画线 var _Links = _Svg.selectAll("line") .data(_Tree_Link) .enter() .append("line") .attr("x1", function (d) { return d.source.x+11; }) .attr("y1", function (d) { return d.source.y + 30; }) .attr("x2", function (d) { return d.target.x+13; }) .attr("y2", function (d) { return d.target.y + 2; }) .style("stroke", "black");

8、//最终结果