D3.js Series-Interactive operation and layout

First, the chart interactive operation

Interaction with a chart means that one or more listeners are set on a graphic element and react accordingly when the event occurs.

Interaction, refers to the user has entered some kind of instruction, the program accepts the instruction must make some kind of response. For visual charts, interaction can make a chart more vivid and more expressive. For example, drag some of the graphics in the chart, slide the mouse over the graphic to appear, zoom in or out with the touch screen, and so on.

There are three types of tools that users use to interact: mouse, keyboard, touch screen.

To add an interaction :　　 Adding an interaction to an element is straightforward and the code is as follows:

var circle = svg.append ("circle"); Circle.on ("click", Function () {    /// add Interactive content here } );

This code adds a circle to SVG and then adds a listener that is added by on (). In D3, each selection set has an on () function that is used to add an event listener.

　　the first parameter of On () is the listener event, the second parameter is the content of the response after the event is heard, and the second parameter is a function .

The common events of the mouse are:

• Click: When the mouse clicks on an element, the equivalent of MouseDown and MouseUp are grouped together.
• MouseOver: The cursor is placed on an element.
• Mouseout: When the cursor moves out of an element.
• MouseMove: When the mouse is moved.
• MouseDown: The mouse button is pressed.
• MouseUp: The mouse button is loosened.
• DblClick: Double-click the mouse.

There are three commonly used keyboard events:

• KeyDown: Triggered when the user presses any key, press and hold to trigger this event repeatedly. The event does not differentiate between uppercase and lowercase letters, for example "a" and "a" are considered consistent.
• KeyPress: Triggered when the user presses a character key (uppercase and lowercase letters, numbers, plus sign, equal sign, carriage return, and so on), which is triggered repeatedly when pressed. The event distinguishes the case of letters.
• KeyUp: Triggered when the user releases the key, without distinguishing the case of the letter.

There are three commonly used events for touch screens:

• Touchstart: When the touch point is placed on the touchscreen.
• Touchmove: When the touch point moves on the touch screen.
• Touchend: When the touch point is taken off the touch screen.

　　when an event is monitored, D3 will save the current event to D3.event object, which holds the various parameters of the current event , please have a good reference. If you need to output the event immediately after you hear the event, you can add a line of code:

Circle.on ("click", Function () {    console.log (D3).  Event );});

Example: Add mouse to Move (mouseover), mouse out (mouseout) two event listener. D3.select (this) is used in the listener function to indicate the selection of the current element , this is the current element, and it is fine to change the element that responds to the event.

. attr ("Fill","Steelblue"). On ("mouseover", Function (d,i) {D3.Select( This). attr ("Fill","Yellow");}). On ("mouseout", Function (d,i) {D3.Select( This). Transition (). Duration ( -). attr ("Fill","Steelblue");});

second, the layout

Layout, can be understood as "the production of common graphics functions", with it to make a variety of relatively complex chart is more convenient.

1. What is the layout?

Layout, in English is layout. Literally, you can think of "deciding what elements to draw where" means. Layout is a very important concept in D3. D3, unlike many other visualization tools, is relatively low-level, not very convenient for beginners, but once mastered, it is more handy than other tools. Shows the difference between D3 and other visualization tools:

As you can see, the D3 steps are relatively large. The disadvantage is not easy for beginners, but also difficult to understand. The advantage is the ability to produce more sophisticated graphics. Therefore, we can define when to choose D3 better:

• Choose D3: If you want to develop any of the diagrams you imagine in your mind.
• Choose Highcharts, Echarts, etc.: if you want to develop several fixed kinds of very popular charts.

2. How to understand the layout

As you can see from the diagram above, the layout works by converting data that is not suitable for drawing into data that is appropriate for drawing. For beginners to understand, the role of layout can be interpreted as: data Conversion .

3. What are the layouts?

D3 offers a total of 12 layouts:

Pie chart (PIE), Force-directed graph (forces), chord graph (Chord), tree, cluster diagram (Cluster), bundle (bundle), Pack Diagram (Pack), histogram (histogram), partition map (Partition), stack diagram, Matrix tree (TREEMAP), hierarchy Chart (Hierarchy).

In 12 layouts, a hierarchy chart (Hierarchy) cannot be used directly. cluster, package, partition, tree, and matrix trees are expanded by the hierarchical graph. As a result, the layout that can be used is 11 (5 of which are scaled by the hierarchy graph). The function of these layouts is to convert some data into another data, and the transformed data is beneficial to the visualization.

D3.js Series-Interactive operation and layout