I have a straightforward axis setup:
var timelines = g2.selectAll(".timelines").data(data);
var xScale = d3.scale.ordinal()
.domain(dataset)
.range([0,axisSpacing.width]);
var xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom")
.ticks(1)
.tickFormat(axisTicks)
.outerTickSize(0)
.tickSize(0);
timelines.enter().append("g")
.attr("class", "axis")
.attr('transform',function(d,i) { return "translate(" + axisSpacing.left + "," + (axisSpacing.top + (i * spacing)) + ")"})
.call(xAxis)
.selectAll("text")
.attr("dy","20px")
.attr('class',"axis-text")
I'd like to apply multiple styles to the tick texts. One style for the first tick; another style, for ticks thereafter. How can I achieve this?
I decided upon this solution:
d3.selectAll(".axis-text").style("text-anchor",function(d,i){ return i%2 ? "end" : "start"})
If you have two ticks on an axis, this places both tick labels on the inside of the axis length. See below:
Related
I'm trying to create a heat map.
The code is on Codepen: https://codepen.io/imestin/pen/qBOpodX?editors=1010
My problem is, that the axes are not showing on the SVG canvas.
Inspecting it with web developer tools, I can see the elements.
These are the lines that I think are important in drawing the axes (for the x-axis):
let minYear = d3.min(data, d => d.year );
let maxYear = d3.max(data, d => d.year );
let xScale = d3.scaleLinear()
.domain(minYear,maxYear)
.range(0,canvasX);
//xAxis - needs xScale
let xAxis = d3.axisBottom(xScale);
//X-axis draw
Canvas.append("g")
.attr("id","x-axis")
.attr("class","tick")
.attr("transform", "translate(" + (edge) + ", " + (canvasY) + ")")
.call(xAxis)
Other elements are drawing correctly, basic SVG drawing is working.
The xScale domain and range need an array of values, for example:
xScale = d3.scaleLinear()
.domain([minYear,maxYear])
.range([0,canvasX]);
And secondly, the axis is positioned off the bottom of canvas, so it needs to adjusted up, for example:
Canvas.append("g")
.attr("id","x-axis")
.attr("class","tick")
.attr("transform", "translate(" + (edge) + ", " + (canvasY - 20) + ")")
.call(xAxis)
I'm playing around with different kinds of D3 charts and for this particular example, I can't seem to get the grid lines to show up. I've compared it to a similar example I have where the lines show up but I still can't make sense of it. Here is a jsfiddle of what I have at the moment.
I'm mainly interested in the horizontal grid lines so here is the code for when I add the y-axis:
var gy = svg.append('g')
.attr('class', 'y axis')
.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')')
.call(yAxis);
gy.selectAll('g').filter(function(d) {
return d;
})
.classed('minor', true);
You can use the tick size to set the size of the horizontal grid lines. Width should be the same width as your x-axis * -1:
var yAxis = d3.svg.axis()
.scale(yScale)
.tickFormat(formatNumber)
.tickSize(-width)
.ticks(3)
.orient('left');
(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 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
I am drawing a chart with d3.js using d3.scale.log for the x axis in combination with a custom labels. Unfortunately the labels run into each other ... any hints on how to make this work?
var width = 400;
var x = d3.scale.log().domain([1, 1000]).range([0, width]);
var formatSi = d3.format(".4s");
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom")
.tickFormat(function(d, i) {
return formatSi(d) + 'Hz'
});
var svg = d3.select("#chart")
.append("svg").attr("width", width)
.attr("height", 200)
.append("g").attr("transform", "translate(20,20)");
([1, 3, 6, 9]).forEach(function(d) {
x.domain([1, Math.pow(10, d)]);
svg.append("g").attr("class", "axis x")
.attr("transform", "translate(0," + d * 2 + "0)")
.call(xAxis);
});
A working example of this code is on jsfiddle
figured it out. Trick is to not use .tickFormat to supply the formatting function, but rather the .ticks method which in turn will apply the supplied formatting function to the .tickFormat method of the scale.
var width = 400;
var x = d3.scale.log().domain([1, 1000]).range([0, width]);
var formatSi = d3.format(".4s");
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom")
.ticks(5,function(d, i) {
return formatSi(d) + 'Hz';
});
var svg = d3.select("#chart")
.append("svg").attr("width", width)
.attr("height", 200)
.append("g").attr("transform", "translate(20,20)");
([1, 3, 6, 9]).forEach(function(d) {
x.domain([1, Math.pow(10, d)]);
svg.append("g").attr("class", "axis x")
.attr("transform", "translate(0," + d * 2 + "0)")
.call(xAxis);
});
The result is still not entirely satisfying as the system seems to have trouble placeing labels when the ticks are close together ...