簇布局

Posted 2020-08-11 禅楼望月

布局是一种数据处理算法，将输入的数据转换为某种构造器所需要的数据。D3有12中布局：捆绑布局、弦布局、簇布局、力布局、层次布局、直方图布局、包布局、分区布局、饼布局、堆叠布局、树布局、和矩形树布局。

 

簇布局可以产生树状图：将树的叶子节点放在同一深度的节点-连接图。簇布局遵循方法链模式，在该模式下setter方法返回布局本身，允许使用简单语句调用多个setter。

数据格式

数据就需要有父子关系，如：

var data={
  "name":"A",
  "children":[
      {
          "name":"B01",
          "children":[
              {	"name":"C01"	},
              {	"name":"C02"	},
              {	"name":"C03"	}
          ]
      },
      {
          "name":"B02",
          "children":[
              {	"name":"C04"	},
              {	"name":"C05"	}
          ]
      }
  ]
};

但是经常我们拿到的数据并不是这样的。如数据库中一般都是以如下结构存储有父子关系的记录的：

Name	Parent
Eve
Cain	Eve
Seth	Eve
Enos	Seth
Noam	Seth
Abel	Eve
Awan	Eve
Enoch	Awan
Azura	Eve

因此从后端传过来的数据也就是数组对象

 这就需要我们进行转换了。d3.stratify()方法就是干这个事情的。

var stratify = d3.stratify().id(function (d) {return d.name;}).parentId(function(d){return d.parent;});
var rawData=[
    {name:"Eve",parent:""},
    {name:"Cain",parent:"Eve"},
    {name:"Seth",parent:"Eve"},
    {name:"Enos",parent:"Seth"},
    {name:"Noam",parent:"Seth"},
    {name:"Abel",parent:"Eve"},
    {name:"Awan",parent:"Eve"},
    {name:"Enoch",parent:"Awan"},
    {name:"Azura",parent:"Eve"}
];
var data = stratify(rawData);

 d3.stratify()返回一个层次结构，用于层次布局中的数据结构。

其中的data元素就是层次结构的root，children是root的children，parent表示它的父元素（root没有父元素），再往下每个每个节点都是这种结构形式。

转换数据

这里的转换主要是为上面的data添加坐标信息。

d3.cluster().size([200,300]).cluster(data);

这是经过Cluster转换后的data，其中size函数指定的是图形的大小。而转换出的data中的每个节点坐标就是每个节点在这个size区域中应该在的位置。那现在我们的任务就是：

①用贝塞尔曲线连接这些位置

②在这些位置上画一个圆

③添加text

在d3的第三版中提供了diagonal方法，可以直接用它来生成贝塞尔曲线，但是在第四版却没有这个方法了。那我们就在第四版中添加这个方法。

//扩展d3
(function () {
    function d3_functor(v) {
        return typeof v === "function" ? v : function() {
            return v;
        };
    }
    d3.functor = d3_functor;
    //贝塞尔曲线连接起始和终止点
    function _diagonal() {
        var source = function (d, i) {return d.source;},
                target = function (d, i) {return d.target;}, data=null,
                projection = function (d) {return [ d.x, d.y ];};
        function diagonal(d, i) {
            var p0 = source.call(this, d, i), p3 =Wordpress - 将代码片段包含到布局的选定部分的插件

 有没有更聪明的方法将布局绑定到片段？
 android片段表格布局
 重新创建片段布局
 片段布局不覆盖整个屏幕
 如何实现具有不同片段/布局的 ViewPager