D3js Path Generator vs layouts

We know that the general routine of D3 is D3.selectall (' Path.mypath '). Data (Yourdataset). Enter (). Append (' path '). attr (' class ', ' MyPath '). attr ( ' d ', thepathstring)

The acquisition of Thepathstring is usually generated based on the binding yourdataset. The specific generation methods are:

1. Through the program itself section to piece together the D property of path, for example in D3V4 because of the cancellation of the diagonal diagonal generator, we can manually piece together the link between the nodes through the following code:

var link = svg.selectall (". Link")    . Data (Root.descendants (). Slice (1))  . Enter (). Append("path")    . attr ("class", "link")    . attr (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. Via D3.path () of the relevant command API

Const CONTEXT = D3.path (); Context.moveto (context.lineto);Context.arc (100 , -0.5, 0), Context.lineto (Math.PI), Console.log (Context.tostring ())// Output m50,50l100,50a50,50,0,0,1,150,100l150,150

3. Create by D3JS built in Path generator

The D3 contains the following path generator, which can be found in the D3-shape module: line, ARC, Pie,area,radialarea,stack, linkvertical,linkhorizontal (alternative D3 V3 in diagonal), Linkradial,symbol

In particular, the third method is very common and convenient in the design of common diagrams. But while this approach frees us from the hassle of piecing together the D attribute, these generator data inputs have certain requirements.

For example, the arc () Arc generator, which requires that input data have the following data structure:

var arcitemdata =//  arc start angle //  arc end Angle }

Area () region generator, which requires the input point data to have the following data structure (or to specify the corresponding accessor function to obtain the corresponding Y0,Y1 data):

var dataitemforarea =//  y0 is the y-axis value of baseline, generally all points y0 values are equal, also can vary oh //  Y1 is the y-axis value  of topline

In general, the data that we have is the raw data, how to convert it into a data format that is convenient for use by different path generators? Of course you can write your own program one by one mapping, you can imagine this, is a very tedious process. Fortunately, D3 has also given us this, which provides a function called layout that allows you to transform raw data into data that is easy to visualize (not necessarily using a path generator to visualize it), and in many cases, You can use D3 's select,data,enter,append,attr mode directly to consume these converted data!)

D3 has built different layout functions for some of the complex diagrams. Like what:

Pie,force, Chord, Tree, Cluster, Bundle, Pack, histogram generator (histogram), partition, Stack, Treemap,ribbon (D3-chord) (chord chart) , Geopath (D3-geo), Geocircle,geograticule,axistop,axisright,axisbottom,axisleft and so on.

For example, given an array that asks for a pie chart, the idea is to first convert the raw data into an array of data needed for the Arc meta-graph, and then apply the arc generator to draw. As we mentioned above, the arc generator requires some startangle, Endangle, and Innerradius,outerradius to uniquely describe an arc segment. At this point, we can use the arc layout to transform the original data! Look at the following example:

vardata = [1, 1, 2, 3, 5, 8, 13, 21];varArcsdata =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": "Value": +, "index": 1, "startangle": 2.443460952792061,//"Endangle": 3.956079637853813, "Padangle": 0},//{"Data": +, "value": +, "index": 0, "startangle": 0.000000000000000,//"Endangle": 2.443460952792061, "Padangle": 0}//]//then we can use the arc generator.varArcpath =D3.arc () Arcpath.innerradius= 0;//The inner diameter is 0, so it's a circle, not a fan.Arcpath.outerradius = 100;//outside diameter isSvg.selectall (' path '). Data (Arcsdata). Enter (). Append (' path '). attr (' d ', Arcpath)

From the example of the pie chart above, we can conclude that the final realization of data visualization in the application layout, is also rule-based, divided into three steps:

1. Get Raw Data

2. Call the corresponding layout for the original data to transform the data (you can also create your own layout function!)

3. Use the path Builder or the most primitive visual pattern to convert intermediate data using the 2nd step.

D3js Path Generator vs layouts