How to realize the Local Timeline with js
This article mainly introduces "how to achieve the local timeline in js". In the daily operation, I believe many people have doubts about how to achieve the local timeline in js. The editor consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful to answer the doubts about "how to achieve the local timeline in js". Next, please follow the editor to study!
Background demand
Drawing a chart with D3 usually draws an axis, but students who have drawn with D3 know that the axis scale drawn with acquiescence is in English. But the scale we want is in Chinese.
Default formatting:
D3.time.format ("b Y")
Local formatting:
Zh.timeFormat ("Y year b")
Realization idea
The idea is simple:
Define simplified Chinese localization
Format the scale value of the number axis with the local time format function
Key technology
Define a new simplified Chinese localization
/ / Localization of simplified Chinese
Var zh = d3.locale ({decimal: ".", thousands: ",", grouping: [3], currency: ["¥", "]
DateTime: "a% b% e% X% Y"
Date: "% Y/%-m/%-d", time: "% H:%M:%S", periods: ["morning", "afternoon"]
Days: [Sunday, Monday, Tuesday, Wednesday, Thursday, Friday, Saturday]
ShortDays: [Sunday, Monday, Tuesday, Wednesday, Thursday, Friday, Saturday]
Months: [January, February, March, April, May, June, July, August, September, October, October]
ShortMonths: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "October", "102"]})
Define time scale
/ / time scale var timeScale = d3.time.scale () .domain ([new Date (2015, 0,1), new Date (2016, 1,1)]) .range ([0, width-40])
Specify the scale and formatting function of the axis
/ / Timeline var axis = d3.svg.axis () .scale (timeScale) .tickFormat (zh.timeFormat ("% Y year% b")) / / specified as the local formatting function .orient ("bottom")
Draw the number axis
/ add the timeline var svg = d3.select ("body"). Append ("svg") .attr ("width", width+200) .attr ("height", height) .append ("g") .attr ("class", "axis") .attr ("transform", "translate (" + 20 + "," + height/2 + ")") .call (axis)
Adjust scale style
/ / rotate the text d3.selectAll (g.tick text) .attr (transform,translate (30pm 20) rotate (30))
This example is very simple, you can use the following code to test the effect, have you learned it?
Complete code
Body {font-weight:bold;}
.axis path
.axis line {fill: none; stroke: # 000; shape-rendering: crispEdges;}
/ / Localization of simplified Chinese
Var zh = d3.locale ({decimal: ".", thousands: ",", grouping: [3], currency: ["¥", "]
DateTime: "a% b% e% X% Y", date: "% Y/%-m/%-d"
Time: "% H:%M:%S"
Periods: ["morning", "afternoon"]
Days: [Sunday, Monday, Tuesday, Wednesday, Thursday, Friday, Saturday]
ShortDays: [Sunday, Monday, Tuesday, Wednesday, Thursday, Friday, Saturday]
Months: [January, February, March, April, May, June, July, August, September, October, October]
ShortMonths: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "October", "102"]})
/ / svg wide and high
Var width = 1000 and height = 500
/ / time scale
Var timeScale = d3.time.scale () .domain ([new Date (2015, 0,1), new Date (2016, 1,1)]) .range ([0, width-40])
/ / Timeline
Var axis = d3.svg.axis () .scale (timeScale) .tickFormat (zh.timeFormat ("% Y year% b")) .orient ("bottom")
/ / add Timeline
Var svg = d3.select ("body"). Append ("svg") .attr ("width", width+200) .attr ("height", height) .append ("g") .attr ("class", "axis") .attr ("transform", "translate (" + 20 + "," + height/2 + ")") .call (axis).
/ / rotate text
D3.selectAll (g.tick text) .attr (transform,translate (30jin20) rotate (30)) script >
At this point, the study on "how to achieve the local timeline of js" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!
