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.
Related
I have a matrix(20x400) and I am plotting it with imagesc in MATLAB where y axis having 20 values and xaxis having 400 values.
However, I would like to know how can I scale this xaxis 400 to intervals like between 0:20 = 1, 20:40 = 2 until 380:400 = 20; and setting x axis of imagesc in 0-20 scale with the values of 0-20.
I hope it is clear what I am intended to do.
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);
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);
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.