d3.js——矩形分区图

这篇博客介绍了如何使用d3.js库来创建矩形分区图。通过加载城市.json数据,应用d3.layout.partition布局,设置尺寸,转换数据,并为每个节点绘制矩形和文本。在鼠标悬停时,矩形会变为黄色,提供交互体验。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

/**
 * 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;
        })

})

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值