d3画树形图

来源：互联网发布：期货可用资金算法编辑：程序博客网时间：2024/06/06 01:30

代码如下：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <style type="text/css">        .axis path,.axis line{            fill:none;            stroke:black;            shape-rendering:crispEdges;        }        .axis text{            font-family:sans-serif;            font-size:11px;        }        .node circle {            fill: #fff;            stroke: steelblue;            stroke-width: 1.5px;          }          .node {            font: 12px sans-serif;          }          .link {            fill: none;            stroke: #ccc;            stroke-width: 1.5px;          }    </style></head><body>    <script type="text/javascript" src = "http://d3js.org/d3.v3.min.js" charset = "utf-8"></script>    <script type="text/javascript">        var width = 600;        var height = 600;        var svg = d3.select("body")                    .append("svg")                    .style("background-color","yellow")                    .attr("width",width)                    .attr("height",height)        var map = {            "name":"中国",            "children":            [                {                    "name":"浙江",                    "children":                    [                        {                            "name":"杭州"                        },{                            "name":"宁波"                        },{                            "name":"温州"                        },{                            "name":"绍兴"                        }                    ]                },{                    "name":"广西",                    "children":                    [                        {                            "name":"桂林",                            "children":                            [                                {"name":"秀峰区"},                                {"name":"叠彩区"},                                {"name":"象山区"},                                {"name":"七星区"}                            ]                        },                        {"name":"南宁"},                        {"name":"柳州"},                        {"name":"防城港"}                    ]                },            ]        }        //转换数据        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];                            })        d3.json("city.json",function(error,root){            var nodes = tree.nodes(root)            var links = tree.links(nodes)            console.log(nodes);            console.log(links);            var link = svg.selectAll(".link")                        .data(links)                        .enter()                        .append("path")                        .attr("class","link")                        .attr("d",diagonal)                        .attr("transform","translate(60,0)")            var node = svg.selectAll(".node")                            .data(nodes)                            .enter()                            .append("g")                            .attr("class","node")                            .attr("transform",function(d){                                return "translate(" + (d.y+60) + "," + 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;                })        })    </script></body></html>

map变量是city.json的数据格式，此代码必须在服务器上运行。可以用nodejs的npm包下载http-server，

运行结果如下图所示：

这里写图片描述

觉得太丑可以修改一下。。。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <style type="text/css">        .axis path,.axis line{            fill:none;            stroke:black;            shape-rendering:crispEdges;        }        .axis text{            font-family:sans-serif;            font-size:11px;        }        .node circle {            fill: steelblue;            /*stroke: steelblue;  */          stroke-width: 1.5px;          }          .node {            font: 12px sans-serif;          }          .link {            fill: none;            stroke: #ccc;            stroke-width: 1.5px;          }    </style></head><body>    <div class="svg-wrap"></div>    <script type="text/javascript" src = "http://d3js.org/d3.v3.min.js" charset = "utf-8"></script>    <script type="text/javascript">        var width = 600;        var height = 600;        var svg = d3.select(".svg-wrap")                    .append("svg")                    .style("background-color","yellow")                    .attr("width",width)                    .attr("height",height)        //转换数据        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];                            })        d3.json("value.json",function(error,root){            var nodes = tree.nodes(root)            var links = tree.links(nodes)            console.log(nodes);            console.log(links);            var link = svg.selectAll(".link")                        .data(links)                        .enter()                        .append("path")                        .attr("class","link")                        .attr("d",diagonal)                        .attr("transform","translate(60,0)")            var node = svg.selectAll(".node")                            .data(nodes)                            .enter()                            .append("g")                            .attr("class","node")                            .attr("transform",function(d){                                return "translate(" + (d.y+60) + "," + d.x +")"                            })            node.append("circle")                .attr("r",20)                .attr("fill","steelblue")            node.append("text")                .attr("dx",function(d){                    return d.children ? 12 : -10;                })                .attr("dy",35)                .style("text-anchor",function(d){                    return d.children ? "end" :"start";                })                .text(function(d){                    return d.name;                })    </script></body></html>

运行结果如下图所示：

这里写图片描述

阅读全文

0 0