"D3.js Entry Series---9.3" chord chart production

My personal blog is: www.ourd3js.com

CSDN Blog for: blog.csdn.net/lzhlzz

Reprint please indicate the source, thank you.

A string diagram (Chord), which is used primarily to represent a connection between two nodes. Such as:

Lines between two points indicate who has contact with:

The thickness of the line represents the weight:

The above introduction stems from: http://circos.ca/guide/tables/, I do not introduce in detail, still very good understanding.

So how do you use layout to convert the data needed for a string graph in D3 and plot it? Please be patient and look down.

1. First give the data

var city_name = ["Beijing", "Shanghai", "Guangzhou", "Shenzhen", "Hong Kong"  ];var population = [  [3045],  4567, 1234, 3714],< c4/>[3214, $  , 2060, 124  , 3234],  [8761,  6545, the ", 8045, 647  ],  [3211  , 1067
   , 3214, 4000  , 1006],  [2146,  1034, 6745, 4764  , 5000]];

Our data are some city names and a whole bunch of numbers that represent the source of the urban population. Such as

	Beijing	Shanghai
Beijing	1000	3045
Shanghai	3214	2000

The first column on the left is the city where the population is counted, the first row above is the source city of statistics, namely:

Beijing has a population of 1000 people, 3045 of whom are immigrants from Shanghai, with a population of 1000 + 3045.
Shanghai has a population of 2000 people, 3214 of whom are immigrants from Beijing, with a population of 3214 + 2000.

All right!!! For such a set of data, how to visualize.

2. Converting Data

var chord_layout = D3.layout.chord ()                 . Padding (0.03).                 sortsubgroups (d3.descending)                 . Matrix (population) ;

You can use Console.log to output the converted data. After conversion, population is actually divided into two parts, groups and chords, groups is the node in the picture above, chords is the link in the picture above. The chords is divided into source and target, which are both ends of the connection. As the converted result graph:

Groups

Chords:

3. SVG, chord graph, color function definition

var width  = 600;var height = 600;var Innerradius = WIDTH/2 * 0.7;var Outerradius = Innerradius * 1.1;var COLOR20 = d3. Scale.category20 (); var svg = D3.select ("Body"). Append ("SVG"). attr ("width", width). attr ("height", height).    Append ("G"). attr ("transform", "translate (" + WIDTH/2 + "," + HEIGHT/2 + ")");

Everyone here is familiar with it, so you don't have to explain it. If you don't understand, see the previous section.

4. Draw the outer chord (i.e. group, how many cities to draw the number of strings), and draw the city name

var Outer_arc =  D3.svg.arc (). Innerradius (Innerradius). Outerradius (Outerradius); var g_outer = Svg.append ("G"); g_ Outer.selectall ("path"). Data (chord_layout.groups). Enter (). Append ("path"). Style ("Fill", function (d) {return COLOR20 (D.index); }). Style ("Stroke", function (d) {return color20 (D.index);}). attr ("D", Outer_arc); G_outer.selectall ("text"). Data (chord_layout.groups). Enter (). Append ("text"). each (function (d , i) {D.angle = (D.startangle + d.endangle)/2; d.name = City_name[i];}). attr ("Dy", ". 35em"). attr ("Transform", function (d) {return "rotate (" + (D.angle * 180/math.pi) + ")" +   "translate (0," + -1.0* (outerradius+10) + ")" +    ((D.angle > Math.pi*3/4 && d.angle < MATH.PI*5/4)? "Rotate (180)": "");}). Text (function (d) {return d.name;});

Draw the part of the outer chord, in fact, and draw a pie chart is the same, you can refer to section 9.1, then the above code is not difficult to understand. There is the text outside the string (that is, the city name), see the last piece of code:

After binding the data, there is a each (), which represents the code for any one of the binding elements that executes the following nameless function functions, where the code is: calculate an angle, assign a value to D.angle, and get the name of the city.

When using transform for displacement, pay attention to the order of conversion: rotate-translate. There is the last line of code for the transformation:

((D.angle > Math.pi*3/4 && d.angle < MATH.PI*5/4)? "Rotate (180)": "")

This means that when the angle is between 135° to 225°, the rotation is 180 °. Otherwise the text below is inverted, not conducive to viewing.

5. Drawing of internal chords

var Inner_chord =  D3.svg.chord (). Radius (Innerradius); Svg.append ("G"). attr ("Class", "chord")    . SelectAll (" Path "). Data (chord_layout.chords).    enter (). Append (" path "). attr (" D ", Inner_chord)    . Style (" Fill ", Function ( d) {return color20 (D.source.index);}). Style ("opacity", 1). On ("MouseOver", function (d,i) {d3.select (this). Style ("Fill", "Yellow");}). On ("Mouseout", function (d,i) {d3.select (this). Transition ()                    . Style ("Fill", Duration ( D.source.index);});

The inner chord is drawn with a dedicated function D3.svg.chord (), so that the internal chord can be made by passing the converted parameters to this function. Haha, it's convenient.

Here are a few words about the mouse operation code: mouseover, Mouseout. Refer to section 8th.

Results such as:

The content of the dialogue operation, please click the following URL, put the mouse on the string chart to see it.

Http://www.ourd3js.com/demo/chord.html

Thank you for reading.