Shulou(Shulou.com)06/01 Report--

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!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.