patition布局

本文介绍了如何利用d3.js的partition布局来创建图形。首先定义partition布局和相关访问函数,接着加载JSON数据并应用布局,得到包含节点属性如children、name、value等的数据。虽然已展示了分区布局的基本实现,但作者提到对于partition的变换形式,如圆形布局的理解仍有欠缺,期待读者指导。
摘要由CSDN通过智能技术生成

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
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值