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.步骤转换来的中间数据！
