D3系列第五弹——绘制树状图

来源：互联网发布：淘宝新店铺有扶持吗编辑：程序博客网时间：2024/05/21 11:32

json数据集：

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

HTNL文件程序：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>D3Study</title>    <script type="text/javascript"src="D3/d3.min.js"></script>    <style>                .MyText {            fill: white;            text-anchor: middle;        }           </style></head><body><div id="tree" style="height: 400px;background-color:beige"></div></body><script type="text/javascript" src="D3/Tree.js"></script></html>

JS文件程序：

/** * Created by sdy on 2017/1/23. */var width = 400,    height = 400;var tree = d3.layout.tree()    .size([width, height-200])    .separation(function(a, b) { return (a.parent == b.parent ? 1 : 2); });var diagonal = d3.svg.diagonal()    .projection(function(d) { return [d.y, d.x]; });var svg4 = d3.select("#tree").append("svg")    .attr("width", width)    .attr("height", height)    .append("g")    .attr("transform", "translate(40,0)");d3.json("Data/TreeData.json", function(error, root) {    var nodes = tree.nodes(root);    var links = tree.links(nodes);    console.log(nodes);    console.log(links);    var link = svg4.selectAll(".link")        .data(links)        .enter()        .append("path")        .attr("class", "link")        .attr("d", diagonal);    var node = svg4.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; })        .attr("dy", 3)        .style("text-anchor", function(d) { return d.children ? "end" : "start"; })        .text(function(d) { return d.name; });});

最终效果：

阅读全文

0 0