"D3.js Practice Tutorial 01" D3 Basic operations

Learning D3.js (hereinafter referred to as D3) also has a period of time, run D3 do a few projects. I found that Chinese D3 tutorials very few, foreign materials but require a certain degree of English reading ability (recommended site: Http://bl.ocks.org/mbostock), so the germination of writing a D3 practical use of the idea of a series of articles, now began to pay action. In the series, I will use D3+HTML5 canvas to achieve some practical effects (such as statistical results display, map data display, etc.), I hope we can learn to communicate with you.

Code I posted on git.cschina.com, you can clone to local run, address is: Http://git.oschina.net/0604hx/d3lesson

The runtime is Java 7+,tomcat 7.0.47+ (WebSocket is needed later, so javaee7 with Tomcat 7+), the IDE is IntelliJ idea 13, and the project view uses Freemarker.

The example code in this chapter mainly describes the basic use of d3.js, such as selecting elements, dynamically modifying element properties, styling, animating elements, and monitoring mouse events.

The example contains D3.js operations on HTML elements (Div,p,span these), as well as operations on SVG elements (circle circle, rect rectangle, line lines, and so on).

Here's the key to the data function in D3, as follows:

Create a shape array of length 10, resulting in: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]var data = D3.range (10);//You can then use this array to create 10 corresponding DIV elements, one for each object in the array div// Here is the Class=test div (good to distinguish from other Div), at the beginning of the call SelectAll (' div.test ') is actually an empty set//Then call the data method, according to the length of the incoming object, Create a collection of the corresponding length (at this point the elements inside the collection are empty, is reserved for the div after the empty position)//And then call the Enter () method, is to enter the specific elements of the collection, you can use append (), insert () These methods to create HTML elements// After creating a div, you can assign a value to the div attribute//Here, I set the class attribute to the Div, and then add the text to the Div. You can see that each div corresponds to an element in the data you created in the previous step, and you can use the data element's data ("Div.test"). D3.selectall ("a").    Enter ()    . Append ("div ")    . attr (" Class "," Test ")    . HTML (function (d) {        return D;    })    ;

Deploy a project exported from Git to Tomcat, which you can see in the browser on the homepage below

There are 3 links in the page:

Page 1 using the D3 operation DIV Element, click on the screen can brush div position

Page 2 has the same effect, just replaced the DIV element with the SVG rect

Page 3 describes the operation of D3 for the basic elements of SVG, including data (), enter (), and the use of the exit () function.

Page 3 is as follows

Attach the core code:

/** * According to CMD command in execute task */function work (cmd) {cmd = cmd | | '; Randomly draw a round if (cmd== ' circle ') {var c = g.append ("Circle"). attr ("Class", "child                            "). attr (" CX ", random (width)). attr (" Cy ", Random (height))            . attr ("R", random (+) +). attr ("Fill", Colors (count));        Count + +;            } else if (cmd== ' rect ') {var w = random (100) +20; var r = g.append ("rect"). attr ("Class", "Child"). attr ("X", Random (W                            idth). attr ("Y", random (height)). attr ("width", W)            . attr (' height ', W). attr ("Fill", Colors (count));        Count + +; }//random lines else if (cmd== ' line ') {var l= g.append ("Line '). attr ("Class", "Child"). attr ("x1", random (width))                            . attr ("Y1", random (height)). attr ("X2", Random (width))            . attr ("Y2", random (height)). attr ("Stroke", colors (count));        Count + +; }//Clears the most recently added element else if (cmd== ' clear ') {lastest.attr ("opacity", 1). trans Ition (). Duration (duration). attr ("opacity", 0). each                        ("End", function () {d3.select (this). Remove ();        })            ; }//Empties all elements else if (cmd== ' ClearAll ') {G.selectall (". Child"). attr ("opacity", 1 ). Transition (). Duration (duration). Delay (function (d,i) {return 50*i; }). attr ("opacity", 0). Each ("End", function () {D3.select (thi                    s). Remove (); })        }    }

Full code See: HTTP://GIT.OSCHINA.NET/0604HX/D3LESSON/BLOB/MASTER/WEB/WEB-INF/TEMPLATES/CHAPTER01/SVG2.FTL

"D3.js Practice Tutorial 01" D3 Basic operations