d3.js study notes-06
1 transition
Transition is a dynamic effect, which changes from the initial state to the target state
1.1 start transition
- d3.transition([selection],[name]): create a transition object with the parameter selection set; Generally use D3 select("rect"). Transition () format, which can be called multiple times to produce a variety of transitions
- transition.delay([delay]): set the delay time. The transition will take place after a certain time. The unit is milliseconds.
- transition. The duration of the transition is set to [duration], in milliseconds. For example, duration(2000), i.e. 2s
- transition.ease(value[,arguments]): set transition styles, such as linear transition, spring handling, etc.
example
var rect = svg.append ("rect") .attr("fi11","steelblue") .attr("x",10) .attr("y",10) .attr("width",100) .attr("height",30); .transition() .delay(500) //Restart after a delay of 500ms .duration (1000) //The transition time is 1000ms .ease("bounce") // Transition style .attr("width",300);//Set new width
1.2 properties of transition
The attribute here refers to the attribute of the selected element and the feature to be changed
- transition.attr(name, value): transition the attribute name to the target value, valuc. Value can be a function.
- transition. Attrtween (name, tweet): use the interpolation function tweet () to transition the attribute name.
The transition process lasts for 2s, and the attribute width transitions from 100 to 400 - transition.style(name,value[,priority]): transition the name attribute of CSS style to the target value value. Priority is an optional parameter, which indicates the priority of CSS style. There are only two values: null and important.
- transition. Styletween (name, tweet [, priority]): use the function tweet to transition the CSS style attribute name. Similar to attrTween().
.style("fi11","steelblue") .transition() .style("fi11","red") // The fill color changes from steelblue to red
- transition.text(value): at the beginning of the transition, set the text to the value value.
- transition. Tweet (name, factory): transition the attribute name according to the function factory. attrTween() and styleTween() are both implemented with this function. You need to use tweet() to transition text.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title></title> <scrip src="https://d3js.org/d3.v3.min.js"></scrip> <script src="../d3.v3.min.js"></script> <!--Select any reference method: local/on-line--> </head> <style> </style> <body> <script> var svg=d3.select("body") .append("svg") .attr("width", 600) .attr("height", 600) var text= svg.append ("text") .attr("fill","red") // Color of text .attr("x",100) // x coordinate of text .attr("y",10) // y coordinate of text .attr("dy","1.2em") // Length of text .attr("text-anchor", "end") // Position of text .text(100); // Text content var initx= text.attr("x"); // Gets the value of the property x of text var initText = text.text(); // Gets the text of text var textTran= text.transition() .duration(2000) .tween("text" ,function(){ return function(t){ d3.select(this) .attr("x", Number(initx)+t*300) // The meaning of t is the same as above, and the x coordinate and text content are updated .text(Math.floor(Number(initText)+t*300)); } }); </script> </body> </html>
- transition.remove(): after the transition, delete the selected element, which is applicable to fade out
rect.transition() .attr("width",0) .remove() // When the width of the element becomes 0, the element is deleted
1.3 sub elements
transition()You cannot affect child elements in the selection set
How to select child elements:
- transition.select(selector): select the first child element matching the selector for transition.
- transition. Select all (selector): select all child elements that match the selector for transition.
- transition.filter(selector): filter, and selection Filter() is similar.
var dataset = [100,100,100]: var g = svg.append("g"); var rect = g.selectAll("rect") // Add three child elements to the g element: rectangle .data(dataset) .enter() .append("rect") .attr("fi11","steelblue") .attr("id", function (d,i){ return "rect" + i;}) .attr("x",10) .attr("y",function (d,i){ return 10 +i* 35;}) .attr("width", function(d.i){return d; }) .attr( "height",30); g.transition().select("#Rect1 ") / / select the element whose id is rect1 for transition .attr("width",300) g.transition().selectAll("rect") // Select all rectangles in the g element .attr("width",300)
1.4 each() and call()
**each() in the selection set: * * processes the elements in the selection set separately
p.data(persons) .each(function (d,i){ d.age = 20; })
each() in the transition object: transition Each ([type,] listener) supports the response to events
Type indicates the type of event, including: start (execute at the beginning of transition), end (execute at the end of transition) and interrupt (execute when a new transition is called elsewhere during transition execution). When the event occurs, the listener (a function) is called.
g.transition() .duration (2000) // Transition time 2 seconds .selectA11("rect") // Manipulate all rectangles .each("start", function(d,i){ console.log("start"); // Output start at the beginning of transition }) .each("end", function (d,i){ console.log("end"); // Output end at the end of transition } .attr("width".300);
g.transition() .duration (2000) .selectAll ("rect") .each("interrupt", funetion(d,i){ console.log("interrupt"): }) .attr("width",300); setTimeout(function ({ // g.transition() // Execute a new schedule .selectAl1("rect") .attr("width",10); },1000);
call() in the selection set: pass the selection set itself as a parameter to a function
d3.selectAll("div").call(function) // Pass the selection set as an argument to the function function for use
call() in transition object: transition Call (function [, arguments]) calls function with the transition object itself as a parameter
It is required when using the coordinate axis
var xscale = d3.scale.linear() .domain([0,10]) .range([0,300]): var xAxis = d3.svg.axis() .scale(xScale) .orient("bottom") var g= svg.append("g") .attr("class", "axis") .attr("transform", "tranalate(50,200)") .cal1(xAxis) // The definition domain of the coordinate axis has changed xscale.domain([0,50]): // Define a transition event of 2000ms to make the change of coordinate axis occur slowly g.transition() .duration (2000) .cal1(xAxis);
1.5 effect of transition
- linear:
It changes linearly and increases at a steady rate with time. - cubic: the default method, which gradually speeds up the speed.
- elastic: approach the end like a spring.
- back: first retract a little, and then rush to the end.
- Bounce: how many times do you bounce at the end
The above methods can be combined with a minus sign (-) and j in/out. There are four methods, such as linear in and linear in out - In: move in the positive direction.
- out: move in the opposite direction.
- In out: the first half moves in the in mode and the second half moves out.
- Out in: the first half moves in the out mode and the second half moves in the in mode.
2 timer
setInterval(code,millisec): execute the code periodically until * * clearInterval() * * is called or the window is closed.
setTimeout(code,millisec): execute the code after a specified time.
// Pseudo code var id = setInterval(draw, 10) ; // Execute the function draw once after 10ms clearInterval(id) // Clear the timer by the Id of the timer
d3.timer(function[, delay[,time]): after delaying the relative absolute time, the default value of time is date Now(), and then call function().
d3.timer(draw,1000); // Call draw after current time delay of 1000ms d3.timer(draw, 500,+new Date(2015,1,1,15,21,30)); // Compared with 15:21:30 on February 1, 2015 (the month starts from 0), draw is called after a delay of 500ms
3 transitional application scenarios
- Element just appeared
- Element just updated
- Element deleted
4 animation cases
4.1 clock
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title></title> <script src="../d3.v3.min.js"></script> </head> <style> /* Clock style */ .time { font-family: cursive; font-size: 40px; color:red; } </style> <body> <script> // Returns the time in the specified format function getTimeString() { var time = new Date(); // Get local current time var hours = time.getHours(); // When getting var minutes = time.getMinutes(); // Get points var seconds = time.getSeconds(); // Get seconds hours = hours < 10 ? "0" + hours : hours; // Adjust the format to keep two digits minutes = minutes < 10 ? "0" + minutes : minutes; seconds = seconds < 10 ? "0" + seconds : seconds; // Return time string return hours + ":" + minutes + ":" + seconds; } var svg = d3.select("body").attr("width", 400).attr("height", 400); var text = svg .append("text") .attr("x", 200) .attr("y", 200) .attr("class", "time") .text(getTimeString()); function updateTime() { text.text(getTimeString()); } // Timer update time, updated once per second setInterval(updateTime, 1000) </script> </body> </html>
References
[1] LV Zhihua Proficient in D3 JS: interactive data visualization advanced programming [M] Beijing: Electronic Industry Press, 2015:151-172