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

My personal blog: 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. For example, with:

A line representation between two points. who has contact with whom:

The thickness of the line represents the weight:

Watermark/2/text/ahr0cdovl2jsb2cuy3nkbi5uzxqvbhpobhp6/font/5a6l5l2t/fontsize/400/fill/i0jbqkfcma==/dissolve/70 /gravity/southeast ">

The above introduction stems from: http://circos.ca/guide/tables/, I do not specifically introduced, or very good understanding.

So how to use layout in D3 to convert the data needed for the chord graph. and drawing 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	361°	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 from the Local. There are 3214 immigrants from Beijing, with a total 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) ;

Can output the converted data with Console.log.

After the conversion, population was actually divided into two parts, groups and chords. Groups is the node in the image 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. Definition of a color function

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 very familiar with it, so you don't have to explain it.

If you don't understand, look at the previous chapters.

4. Draw the outer chord (that is, grouping. 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;});

Drawing the part of the outer chord is, in fact, the same as drawing a pie chart. Be able to participate in 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 (). This function is to represent the code for any of the elements of a binding that runs behind the nameless function, where the code is: calculate an angle and assign a value to D.angle. Gets 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 (), which simply passes the converted reference to this function. You can make internal chords. Haha, it's convenient.

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

The results are for example:

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.

Copyright notice: This article blog original articles, blogs, without consent, may not be reproduced.

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