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.
Related
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 am new to d3 and svg coding and am looking for a way to rotate text on the xAxis of a chart. My problem is that typically the xAxis titles are longer than the bars in the bar chart are wide. So I'm looking to rotate the text to run vertically (rather than horizontally) beneath the xAxis.
I've tried adding the transform attribute:
.attr("transform", "rotate(180)")
But when I do that, the text disappears altogether. I've tried increasing the height of the svg canvas, but still was unable to view the text.
Any thoughts on what I'm doing wrong would be great. Do I need to also adjust the x and y positions? And, if so, by how much (hard to troubleshoot when I can see it in Firebug).
If you set a transform of rotate(180), it rotates the element relative to the origin, not relative to the text anchor. So, if your text elements also have an x and y attribute set to position them, it’s quite likely that you’ve rotated the text off-screen. For example, if you tried,
<text x="200" y="100" transform="rotate(180)">Hello!</text>
the text anchor would be at ⟨-200,100⟩. If you want the text anchor to stay at ⟨200,100⟩, then you can use the transform to position the text before rotating it, thereby changing the origin.
<text transform="translate(200,100)rotate(180)">Hello!</text>
Another option is to use the optional cx and cy arguments to SVG’s rotate transform, so that you can specify the origin of rotation. This ends up being a bit redundant, but for completeness, it looks like this:
<text x="200" y="100" transform="rotate(180,200,100)">Hello World!</text>
Shamelessly plucked from elsewhere, all credit to author.
margin included only to show the bottom margin should be increased.
var margin = {top: 30, right: 40, bottom: 50, left: 50},
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
.selectAll("text")
.style("text-anchor", "end")
.attr("dx", "-.8em")
.attr("dy", ".15em")
.attr("transform", "rotate(-65)");
One problem with this rotating D3 axis labels is that you have to re-apply this logic each time you render the axis. This is because you do not have access to the enter-update-exit selections that the axis uses to render the ticks and labels.
d3fc is a component library that has a decorate pattern allowing you to gain access to the underling data join used by components.
It has a drop-in replacement for the D3 axis, where axis label rotation is performed as follows:
var axis = fc.axisBottom()
.scale(scaleBand)
.decorate(function(s) {
s.enter()
.select('text')
.style('text-anchor', 'start')
.attr('transform', 'rotate(45 -10 10)');
});
Notice that the rotation is only applied on the enter selection.
You can see some other possible uses for this pattern on the axis documentation page.
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.