Name: g-xaxisOrdinal
Owner: FT Interactive News
Description: null
Created: 2017-06-15 11:21:37.0
Updated: 2017-06-15 11:30:54.0
Pushed: 2017-06-15 15:49:47.0
Homepage: null
Size: 49
Language: JavaScript
GitHub Committers
User | Most Recent Commit | # Commits |
---|
Other Committers
User | Most Recent Commit | # Commits |
---|
Pre styled ordinal x-axis for use with the FT's g-chartframe architecture as part of the Visual Vocabulary. As the name suggests it creates an ordinal y-axis that can be appended to the .plot obejct in the g-chartframe hopefully eliminating the need to code another standard y-axis.
A centralised axis component for easy maintenance of styles accross the full Visual Vocabulary. The axis component also appends the correct script tags for use with the FT Pre-Flight script in Adobe Illustrator.
Will also work with other builds where the axis is called into an svg.
The FT axis styles—add the folowwing link in your index file header
The d3 library is already installed in the build
Note The .range() of the x-axis should be determind in part by the .labelWidth() of the y-axis, so it is advisable to ad your y-axis first. See the secton on positioning at yaxisLinear.
Add the following line to the header of you index.html file.
ipt src="to come"> </script>
Not yet deployed
Note All examples shown are from the web frame style
Add the following code to your index.js to append a default x-axis to the .plot object (grey here but is not normally visible). Bye default there are no tick on an ordinal x-axis, these are set to zero.
t myXAxis = gAxis.xaxisOrdinal()
entFrame.plot()
.call(myXAxis);
Set the .rangeRound() and the .offset() to the current frame width and height to make the axis correctly fit in the .plot object.
t myXAxis = gAxis.xaxisOrdinal()
xis
.rangeRound([0,currentFrame.dimension().width])
.offset(currentFrame.dimension().height);
entFrame.plot()
.call(myXAxis);
Specify your the .domain in the same way that would in any other d3 axis
t myXAxis = gAxis.xaxisOrdinal()
xis
.rangeRound([0,currentFrame.dimension().width])
.offset(currentFrame.dimension().height);
.domain(myCatagories)
entFrame.plot()
.call(myXAxis);