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
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'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.
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:
(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 :)