d3.js——矩形分区图

来源：互联网发布：retas for mac 下载编辑：程序博客网时间：2024/05/17 22:24
/** * Created by Silence_C on 2016/5/4. */var width = 600,    height =400;var svg = d3.select("body").append("svg")    .attr("width",width)    .attr("height",height)    .append("g");var color = d3.scale.category20();//数据转换var partition = d3.layout.partition()    .sort(null)    .size([width,height])    .value(function(d){return 1})//表示分区大小的值。这里的意思是：如果数据文件中用 size 值表示结点大小，那么这里可写成 return d.size//读取数据并绘图d3.json("city.json",function(error,root){    if (error)  console.log(error);    console.log(root);    var nodes = partition.nodes(root),        links = partition.links(nodes);    console.log(nodes);    ////开始画图    var rects = svg.selectAll("g")        .data(nodes)        .enter()        .append("g")    rects.append("rect")        .attr("x", function (d) {return d.x; })//顶点的x坐标        .attr("y",function(d){return d.y; })//顶点的y坐标        .attr("width", function (d) {return d.dx;}) //顶点的宽度dx        .attr("height",function(d){return d.dy;}) //顶点的高度dy        .style("stroke","#fff")        .style("fill",function(d){            return color((d.children ? d: d.parent).name);        })        .on("mouseover",function(d){            d3.select(this)                .style("fill","yellow")        })        .on("mouseout",function(d){            d3.select(this)                .transition()                 .duration(200)                .style("fill",function(d){                    return color((d.children?d: d.parent).name)                })        })    rects.append("text")        .attr("class","node_text")        .attr("transform",function(d,i){            return "translate("+( d.x+20)+","+ (d.y+20)+")"        })        .text(function (d,i) {            return d.name;        })})
0 0