ShapeGeneratorLineGeneratorvarlinePath=d3.line()-使用默认设置构造一个线生成器。linePath.x()-如果指定了x，则将x访问器设置为指定的函数或值并返回当前行生成器。如果未指定x，则返回当前x访问器，默认为：functionx(d){returnd[0];}linePath.y()-如果指定了y，则将y访问器设置为指定的函数或值，并且返回当前行生成器。如果未指定y，则返回当前y访问器，默认为：functiony(d){returnd[1];}linePath.curve()-如果指定curve，则表示设置当前曲线插值方法并返回线发生器。按如下方式使用它：varlines=[[80,80],[200,100],[200,200],[100,200]]varlinePath=d3.line().curve(d3.curveCatmullRom.alpha(0.5));vardrawLine=d3.select('#line').append('svg').attr('width',400).attr('height',300);drawLine.append('路径').attr('d',linePath(lines)).attr('stroke','black').attr('stroke-width','3').attr('fill','none');区域生成器当需要生成折线或曲线下的区域时，使用区域生成器。数据访问器一共有六个：x(),x0(),x1(),y(),y0(),y1()，不用都用，其他方法基本和线段类似generator，使用方法如下：varareas=[80,120,130,70,60,90]vardragArea=d3.area();=dragArea.x(function(d,i){return20+i*30;})dragArea.y0(function(d,i){return400/2;})dragArea.y1(function(d,i){return400/2-d;})dragArea.曲线(d3.curveCatmullRom.alpha(0.5))vardrawLine=d3.select('#line').append('svg').attr('width',400).attr('height',300);drawLine.append('path').attr('d',dragArea(areas)).attr('stroke','black').attr('stroke-width','3').attr('fill','#f0f');圆弧生成器圆弧生成器可以凭借起始角、结束角、内半径、外半径等生成圆弧的路径，所以在制作饼图、弦图等时。做图的时候经常用到常用方法有：vararc=d3.arc()——设置圆弧生成器arc.innerRadius(80)；-设置环的内半径arc.startAngle(0)-设置起始角度arc.endAngle(Math.PI)-设置结束角度arc.cornerRadius(10)-设置角半径大致使用方法：vararc=d3.arc().innerRadius(80)outerRadius(100).startAngle(0).endAngle(Math.PI);vardrawLine=d3.select('#line').append('svg').attr('width',400).attr('height',300);drawLine.append('path').attr('d',arc()).attr('stroke','black').attr('stroke-width','3').attr('fill','#f0f').attr('transform','translate(200,150)');和弦发生器和弦发生器是根据两条弧线绘制的，需要以下方法：varchord=d3.ribbon()-设置和弦发生器chord.source()-设置起始弧度chord.target()-设置endingarcchord.radius()-设置弧弦的半径。startAngle()-设置弧弦的起始角度。endAngle()-设置弧的结束角度数据格式为：{source:{startAngle:0.2,endAngle:Math.PI*0.3,radius:100},target:{startAngle:Math.PI*1,endAngle:Math.PI*1.6,radius:100}}你也可以改变使用自定义数据的方法：vardata={a:{a1:0.2,a2:Math.PI*0.3,},b:{a1:Math.PI*1,a2:Math.PI*1.6,}}varchord=d3.ribbon();chord.source(函数(d){返回d.a})chord.target(function(d){returnd.b})chord.radius(100);chord.startAngle(function(d){returnd.a1})chord.endAngle(function(d){returnd.a2}）
