patition布局

来源:互联网 发布:led编辑软件 编辑:程序博客网 时间:2024/06/05 02:07

1.partition布局

首先就是先定义一个partition布局还有布局的相关访问函数

var partition=d3.layout.partition()                        .sort(null)                             .size([width,height])                        .value(function(d){                            re

json数据格式
这里写图片描述
然后就是加载数据,并用布局包裹数据,得到我们生成图形所需要的特定格式的数据

    var nodes=partition(root);    var links=partition(nodes);    console.log(nodes);

这里写图片描述

控制台打印可以看出,每个node有8个字段,children,name,value,depth,x,y,dx(宽度),dy(高度),很好的定义了每个node的属性,有了这些字段便可以生成层层递进的partition布局。

2.全部代码

<style type="text/css">    .node_text{        font-size: 15px;        text-anchor: middle;    }</style><body></body><script type="text/javascript">var width=500,height=500;var svg=d3.select("body")            .append("svg")            .attr("width",width)            .attr("height",height)var partition=d3.layout.partition()                        .sort(null)                        .size([width,height])                        .value(function(d){                            return 1;                        })var color=d3.scale.category20();d3.json("city_tree.json",function(error,root){    if (error) {        console.log("load data find error");    }    var nodes=partition(root);    var links=partition(nodes);    console.log(root)    console.log(nodes);    console.log(links);    var rects=svg.selectAll("g")                 .data(nodes)                 .enter()                 .append("g")//我们用rect表示层层递进的布局    rects.append("rect")        .attr("x",function(d){            return d.x;        })        .attr("y",function(d){            return d.y;        })        .attr("width",function(d){            return d.dx;        })        .attr("height",function(d){            return d.dy;        })        .attr("fill",function(d){            return color((d.children ? d:d.parent).name);        })        .attr("stroke","#fff")        .on("mouseover",function(d,i){            d3.select(this)                .style("fill","yellow");        })        .on("mouseout",function(d,i){            d3.select(this)                .transition()                .duration(200)                .style("fill",function(d){                    return color((d.children ? d:d.parent).name)                });        });    rects.append("text")         .attr("transform",function(d){            return "translate("+(d.x+20)+","+(d.y+20)+")";         })         .attr("class","node_text")         .text(function(d,i){            return d.name;         })})</script>

这里写图片描述

不足:这篇文章还有很多不足之处,partition的变换形式还没有搞懂,比如说圆形的布局,如果size访问函数设置恰当我们可以生成圆形的布局,看官网例子有些也不太懂,懂得大神可以指点下。

原创粉丝点击