I am using D3.js to build this line chart.and its working fine . but i am not able to print the months on x-axis in abbreviated form (jan,feb....)
here how i am parsing the date.
var parseDate = d3.time.format("%m-%Y").parse;
the code for x-axis
var xAxis = d3.svg.axis().scale(x).orient("bottom");
and printing and appending
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
help me with this.
just use tickFormat with a d3.time.format inside
var xAxis = d3.svg.axis().scale(x).orient("bottom").tickFormat(d3.time.format("%H"))
Related
I've begun learning D3, and many tutorials are written for v3. I read through a lot of v4's documentation, but I can't wrap my mind around how to format my axis labels. Right now I have a visualization that looks like this:
The months overlapping is not ideal. I know I can use d3's timeFormat and use "%b" to use an abbreviated month. But I'm not sure how syntactically it fits in. My code for the bottom axis is:
svg.append("g")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x)
.ticks(d3.timeMonth.every(4)));
I would've expected it to be something like
format = d3.time.format("%b")
svg.append("g")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x)
.ticks(format(d3.timeMonth.every(4))));
But that doesn't work. I know this is probably very simple, but I'm not getting it.
You should use tickFormat instead of ticks:
.tickFormat(d3.timeFormat("%b"))
Here is a demo:
var svg = d3.select("svg")
var scale = d3.scaleTime()
.range([20, 480])
.domain([new Date(), new Date().setYear(new Date().getFullYear() + 1)]);
var axis = d3.axisBottom(scale)
.tickFormat(d3.timeFormat("%b"))
.ticks(d3.timeMonth);
svg.append("g")
.attr("transform", "translate(0,50)")
.call(axis)
<script src="https://d3js.org/d3.v4.min.js"></script>
<svg width="500"></svg>
EDIT: For showing the year instead of January:
var svg = d3.select("svg")
var scale = d3.scaleTime()
.range([20, 480])
.domain([new Date(), new Date().setYear(new Date().getFullYear() + 1)]);
var axis = d3.axisBottom(scale)
.tickFormat(function(d) {
return d3.timeFormat("%b")(d) === "Jan" ?
d3.timeFormat("%Y")(d) : d3.timeFormat("%b")(d);
})
.ticks(d3.timeMonth);
svg.append("g")
.attr("transform", "translate(0,50)")
.call(axis)
<script src="https://d3js.org/d3.v4.min.js"></script>
<svg width="500"></svg>
I am doing a dot plot in D3 and I want to add the values along a right Y axis. I have done this before in many charts, adding labels is straightforward, but for some reason this particular chart is giving a lot of problems.
I cant get the values of the dots to show on the right axis.
jsfiddle:
The chart appears on click.
The relevant code for the value labels attached to the right axis:
svg.append("g")
.attr("class", "y axis")
.attr("transform", "translate(" + (width + 10) + " ,0)")
.call(yAxis1)
.selectAll('text')
.text(function(d){ return xScale(d.value); });
With an ordinal axis you are binding your domain values to the axis ticks. So, the scale domain should be:
var yScale1 = d3.scale.ordinal()
.domain(data.map(function(d) { return d.value; })) //<-- use '.value'
.rangeRoundPoints([0, height]);
Then your y-axis call just becomes:
svg.append("g")
.attr("class", "y axis")
.attr("transform", "translate(" + (width + 10) + " ,0)")
.call(yAxis1);
Updated fiddle.
(Not sure if scale is the correct word here.) I want to add additional scale (Ep1 CHL, Ep2 WHO, ..) parallel to x-axis as in the snapshot below:
How do I achieve this?
jsFiddle
Here's the fiddle for your requirement.
And another post for your brief explanation.
Added a column named label and the axis parallel axis is created.
Step 1 : Define the d3.scale.ordinal() and get the unique values using d3.map().
var x2 = d3.scale.ordinal()
.domain(data.map(function (d) {return d.label; }))
.rangeRoundBands([0, width], 0.05);
Step 2 : Pass the scale created to d3.svg.axis().
var xAxis2 = d3.svg.axis()
.scale(x2)
.orient("bottom")
Step 3 : Append a g for the new axis and call the axis created.
svg.append("g")
.attr("class", "x axis")
//.attr("transform", "translate(0," + height + ")")
.call(xAxis2)
Hope this helps :)
I am using d3.js for scatter plot,I want to plot x and y axis such that they intersect at point(100,75).how to do this?
I am using
svg.append("g")
.attr("class", "axis")
.attr("transform", "translate(0," + (padding+223) + ")")
.call(xAxis2);
//Create Y2 axis
svg.append("g")
.attr("class", "axis")
.attr("transform", "translate(" + (padding+200) + ",0)")
.call(yAxis2);
But this will not change according to the scale,and I have used variable for scale.
Please let me know if you need more information.
You would need to offset the axes by the respective amount, which you can determine using the scales of the axes, i.e.
svg.append("g")
.attr("class", "axis")
.attr("transform", "translate(0," + yScale(75) + ")")
.call(xAxis2);
and similarly for the y axis. You may have to tweak the offset slightly to account for other offsets, labels etc.
I work with D3JS and I want an axis in x with this kind of values : 125, 250, 500, 1000 ... So multiply by 2 my values each time.
So I tried a Quantize Scales like this:
var qScale = d3.scale.quantize(2)
.domain([0, 8000])
.range([0, 500]);
And I create my axis like that :
var xAxis = d3.svg.axis()
.scale(qScale);
But when I'm calling the axis with that code :
svg.append("g")
.attr("transform", "translate(" + padding + "," + (ChartHeight - padding) + ")")
.attr("class", "axis")
.call(xAxis);
I have the following error :
Object doesn't support property or method 'rangeBand' (I develop on Visual Studio 2012)
Any idea ?
EDIT: here the full code code