I have a simple demo here https://stackblitz.com/edit/d3-workshop-axis-n8kia7
Its just a simple graph showing the axis.
I know I can control the number of axis ticks with ticks(5) but how can I use it in this code
You have to define the ticks when you define the scale.
For example in your code
const x_axis = d3.axisBottom()
.scale(x);
you have to add .ticks(5) after .scale(x). Something like this
const x_axis = d3.axisBottom()
.scale(x)
.ticks(5);
and at last '.ticks()' doesn't force the number of ticks, it just gives an approximation for d3. For more control on ticks, you can refer this link
Body must be at least 30 characters; you entered 16.
x_axis.ticks(5);
Related
I have about 10 charts with different number of dates on x axis. From couple of weeks to months.
I want to display only 5 dates on x axis equally all the dates range. How to do this? Here is the code
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom")
.ticks(5)
.tickFormat(d3.time.format("%m/%d/%Y"))
This does not works. It sets about 10 ticks instead of 5.
Thanks
You could use below across all your charts:
var someConstant = 5;
yourAxis.ticks(someCostant);
I use an bar chart. Count of y-axis is 9. So y-axis values are displaying from 0 to 9. It looks very congested. I need to reduce the values like displayed by multiplied by 2/3.
Here is my Y-axis code:
yAxis = d3.svg.axis()
.scale(yRange)
//.ticks(2)
// .tickValues(function(d,i){return totalEmpArray[i];})
.tickSize(0)
.orient("left")
.tickSubdivide(true);
yAxis.ticks(6)
or
yAxis.tickValues([0,2,4,6,8,10])
See documentation.
I made a histogram / bar graph. I read in my frequency data as integers and set up my y-axis like this:
var yScale = d3.scale.linear().range([300, 0]).domain([0, 2]);
var yAxis = d3.svg.axis().scale(yScale).orient(‘left’)
.tickFormat(d3.format(,.0f));
Unfortunately, the y axis repeats each frequency several times as shown here:
How do I tell d3 to stop repeating y-values on the y-axis? I don’t want to use .ticks(someNumber) since I want to keep the number of ticks itself flexible.
I needed mine to be dynamic, this worked for me: [Version 4]
var y = d3.scaleLinear().range([height, 0]);
var yAxis = d3.axisLeft()
.scale(y)
.tickFormat(d3.format("%d"));
// Reset the axes domains with new data
y.domain([0, d3.max(data, function (d) { return d.value; })]);
if (y.domain() [1] < 10) {
yAxis.ticks(y.domain()[1])
// 2 ticks
//yAxis.tickValues(y.domain());
}
// Add the y-axis with a transition
yAxisG
.transition()
.duration(500)
.call(yAxis);
Use .ticks(n) instead of tickFormat() on your axis. The ticks() function defines how many ticks d3 should target - it's not always exactly that number. It chooses the most sane division unit on its own. n is 10 by default but you could change it depending on the domain, so for the example data you could set it to 3 (0,1,2). You could theoretically also use it on data enter.
Is your graph's range/height dynamic depending on data? In most cases you don't want that as it's unpredictable. And if you set your graph's height explicitly anyway you DO want to limit the number of ticks and labels to a number best suiting that size.
You might also want to look into https://github.com/mbostock/d3/wiki/Quantitative-Scales#linear_nice . That allows you to define rules for your ticks.
Right now, I use d3.time.scale to generate xAxis ticks, but what I want is make sure the both ends of axis have labels rather than using the D3 axis auto-generated tick label arrangement. I wonder how to do that?
My code:
var ts = d3.time.scale().domain(d3.extent(data.map(function(d){return d.date;})));
var xAxis = d3.svg.axis().orient("bottom");
xAxis.scale(ts).tickFormat(d3.time.format("%Y-%m")).ticks(5);
svg.append("g")
.classed("xAxis", true)
.call(xAxis);
The problem is the axis generated in this way cannot be controlled to decide where the tick labels are arranged. I want to make sure there are always label on both ends of the axis.
I adapted the code from here: http://square.github.io/crossfilter/ to my own data - how do I show the counts on the left on the y-axis?
The basic idea is this:
// Create y-axis
var yAxis = d3.svg.axis()
.orient("left")
.scale(y);
// Add y-axis.
svg.append("svg:g")
.call(yAxis);
x is your horizontal scale.svg is your visualisation's root SVG element (as a selection).
You might want to consult the docs or this example from Mike.