d3js path generator vs layouts

我们知道d3的一般套路就是d3.selectAll('path.mypath').data(yourDataset).enter().append('path').attr('class','mypath').attr('d',thePathString)

而thePathString的获取，一般都是根据绑定的yourDataset来生成的。具体生成方式有：

1. 通过程序自己一节一节地拼凑起来path的d属性，比如在d3v4中由于取消了diagonal对角线生成器，我们可以通过下面的代码手工拼凑连接节点之间的link:

var link = svg.selectAll(".link")
    .data(root.descendants().slice(1))
  .enter().append("path")
    .attr("class", "link")
    .attr("d", function(d) {
      return "M" + d.y + "," + d.x
          + "C" + (d.y + d.parent.y) / 2 + "," + d.x
          + " " + (d.y + d.parent.y) / 2 + "," + d.parent.x
          + " " + d.parent.y + "," + d.parent.x;
    });

2. 通过d3.path()的相关命令API

const context = d3.path();
context.moveTo(50, 50);
context.lineTo(100, 50);
context.arc(100, 100, 50, -0.5 * Math.PI, 0);
context.lineTo(150, 150);
console.log(context.toString())
//输出 M50,50L100,50A50,50,0,0,1,150,100L150,150

3. 通过d3js built in path generator来创建

d3内置有以下path generator，都在d3-shape模块中可以找到: line, arc, pie,area,radialArea, linkVertical,linkHorizontal(替代d3 v3中的diagonal),linkRadial,symbol

特别是第三种方法在常见的图表设计中非常常见，也很方便。但是虽然这种方法解放了我们拼凑d属性的烦恼，但是这些generator的data输入却有一定的要求。

比如arc()弧线生成器，它就要求输入data具有下面的数据结构：

var arcitemdata = {
 startAngle: 0, // 弧线的起始角度
 endAngle: Math.PI *0.6 // 弧线的结束角度
}

area()区域生成器，它就要求输入点data具有下面的数据结构（或者指定对应的accessor function来获取到对应的y0,y1数据）：

var dataItemForArea =[
 {
 y0: 10, // y0为baseline的y轴值，一般所有的点y0值相等，也可以不等哦
 y1: 20, // y1为topline的y轴值
},
 {
 y0: 10,
 y1: 30,
},
 {
 y0: 10,
 y1: 25
}

而一般来说，我们有的数据只是原始的数据，并不能够直接用于绘制。（比如没有startAngle, endAngle我们就无法画弧线）如何转换成方便被不同的路径生成器来使用的数据格式呢？当然你可以自己写一段程序一一映射，可以想象这，又是一个非常繁琐的过程。幸运的是d3也为我们考虑到了这些，它提供了被称为layout的函数，通过这些layout就能将原始的数据，转换为易于被可视化绘图所使用的数据（不一定非要用路径生成器来做可视化哦，很多情况下，你可以直接使用d3的select,data,enter,append,attr的模式来直接消费使用这些转换过来的数据!）

d3为一些复杂的图表分别内置了不同的layout函数。比如：

pie,Force, Chord, Tree, Cluster, Bundle, Pack, histogram generator(直方图），partition, Stack, Treemap,ribbon(d3-chord)（和弦图），geoPath(d3-geo),geoCircle,geoGraticule，axisTop,axisRight,axisBottom,axisLeft等。

比如说，我们给定一个数组，要求生成饼状图，这时我们想到的是首先将原始数据转换为arc元图所需数据数组，随后应用弧生成器来绘制。根据上面我们提到的，arc弧生成器需要一些startAngle, endAngle以及innerRadius,outerRadius来唯一描述一个弧段。这时，我们就可以应用arc layout来转换原始数据了！看下面的例子：

var data = [1, 1, 2, 3, 5, 8, 13, 21];
var arcsData = d3.pie()(data);
console.log(arcsData)
//[
//  {"data":  1, "value":  1, "index": 6, "startAngle": 6.050474740247008, //"endAngle": 6.166830023713296, "padAngle": 0},
//  {"data":  1, "value":  1, "index": 7, "startAngle": 6.166830023713296, //"endAngle": 6.283185307179584, "padAngle": 0},
//  {"data":  2, "value":  2, "index": 5, "startAngle": 5.817764173314431, //"endAngle": 6.050474740247008, "padAngle": 0},
//  {"data":  3, "value":  3, "index": 4, "startAngle": 5.468698322915565, //"endAngle": 5.817764173314431, "padAngle": 0},
//  {"data":  5, "value":  5, "index": 3, "startAngle": 4.886921905584122, //"endAngle": 5.468698322915565, "padAngle": 0},
// {"data":  8, "value":  8, "index": 2, "startAngle": 3.956079637853813, //"endAngle": 4.886921905584122, "padAngle": 0},
//  {"data": 13, "value": 13, "index": 1, "startAngle": 2.443460952792061, //"endAngle": 3.956079637853813, "padAngle": 0},
//  {"data": 21, "value": 21, "index": 0, "startAngle": 0.000000000000000, //"endAngle": 2.443460952792061, "padAngle": 0}
//]
// 接下来我们就可以使用arc generator了
var arcPath = d3.arc()
      arcPath.innerRadius = 0; // 内径为0，因此就是一个圆了,而不是扇形
      arcPath.outerRadius = 100; // 外径为100
svg.selectAll('path).data(arcsData).enter().append('path').attr('d',arcPath)

从上面这个pie图的例子中我们看到经过pie() layout函数变换后，就生成了一堆包含了startAngle, endAngle的对象数组（角度之和为360度），而这些可以总结出来，在应用layout最终实现数据可视化时，也有章可循，分为三步：

1.  获取原始数据

2. 对原始数据调用对应的layout来转换数据（你也可以创作自己的layout函数哦!）

3. 使用路径生成器或者最原始的可视化pattern来使用第2.步骤转换来的中间数据！