var vis = d3.select("#visualisation");
xAxis = d3.axisBottom(xScale)
.ticks(numberOfRecords);
vis.append("svg:g")
.attr("class", "axis")
.attr("height", 30)
.attr("transform", "translate(0," + (HEIGHT - MARGINS.bottom) + ")")
.call(xAxis);
hi guys,
since i updated from d3.js version 3.5 to 4.2.1 the thickness of my x-axis is wrong.
with the version 3.5 i could just set the height but it is not working anymore.
any ideas?
thanks!
Related
I have a bar chart with the X axis, which have ticks that include the month and year. The month and year are in the single row now.
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom")
.tickFormat(RU.timeFormat("%b %Y"));
I need to leave the month in the first line and move the year in the second one.
svg.append("g")
.attr("class", "axis")
.attr("transform", "translate(0," + (h - padding) + ")")
.call(xAxis);
Here is my jsfiddle: https://jsfiddle.net/anton9ov/uaygrmLo/
There is this nice "wrap text function", written by Bostock: https://bl.ocks.org/mbostock/7555321
Using this function, I just modified your axis:
svg.append("g")
.attr("class", "axis")
.attr("transform", "translate(0," + (h - padding) + ")")
.call(xAxis)
.selectAll(".tick text")
.call(wrap, 40);
Check the fiddle: https://jsfiddle.net/gerardofurtado/aLc8t6yq/
PS: I used 40 here as a magic number, change it according to your needs.
I have two axes in my graph right now, that are stuck at the very left and bottom of the graph. I want to make the axes line up with the (0,0) coordinate, or in other words I want the axes to be at x=0 and y=0
Here's my axes code:
//setup x
var xAxis = d3.svg.axis()
.scale(xRange)
.tickSize(5)
.tickSubdivide(true),
//setup y
yAxis = d3.svg.axis()
.scale(yRange)
.tickSize(5)
.orient("left")
.tickSubdivide(true);
I was thinking that the way to do it might just be to make a smaller svg underneath the one that I have, that starts at zero, and put the axes there, and remove them from the one I have right now.
Here's the full code: http://jsfiddle.net/v92q26L8/
The key part of your code is the bit where you attach the axes
vis.append("svg:g")
.attr("class", "x axis")
.attr("transform", "translate(0," + (HEIGHT - MARGINS.bottom) + ")")
.call(xAxis);
vis.append("svg:g")
.attr("class", "y axis")
.attr("transform", "translate(" + (MARGINS.left) + ",0)")
.call(yAxis);
At the moment you are positioning the axes bottom and left using transforms on the groups (svg:g nodes) which contain them.
To reposition the axes you simply need to adjust these transforms using your defined scales.
For your x axis
.attr("transform", "translate(0," + (HEIGHT - MARGINS.bottom) + ")")
becomes
.attr("transform", "translate(0," + yRange(0) + ")")
for your y axis
.attr("transform", "translate(" + (MARGINS.left) + ",0)")
becomes
.attr("transform", "translate(" + xRange(0) + ",0)")
Additionally, it may be sensible to change the names of your scales. The term 'range' has a very particular meaning in D3, I'd suggest xScale and yScale.
JS Fiddle
Newbie question: How can one move the x-axis tick labels further from the x-axis? The snippet of code below produces this:
Whereas what I want is more like this:
From the question here:
d3.js: Align text labels between ticks on the axis
it seems that I need to select the text that contains these labels using select and then apply something like translate(0,-10) to them, but I can't figure out where this text "lives"/the syntax for performing such a selection. Sorry if this is simple; I am very new to D3 (and javascript). Can anyone help? Thanks in advance! Code follows.
<script>
var superscript = "⁰¹²³⁴⁵⁶⁷⁸⁹",
formatPower = function(d) { return (d + "").split("").map(function(c) { return superscript[c]; }).join("");\
};
var margin = {top: 20, right: 20, bottom: 100, left: 100},
width = 400,
height = 400;
var x = d3.scale.log()
.domain([1e1, 1e4])
.range([0, width])
.nice();
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom")
.tickValues([1e1, 1e2, 1e3, 1e4])
.ticks(0, function(d) { return 10 + formatPower(Math.round(Math.log(d) / Math.LN10)); });
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
.append("text")
.attr("class", "label")
.attr("x", (width+margin.left)/2)
.attr("y", 60)
.style("text-anchor", "end")
.text("x-axis label");
</script>
There's a simpler way to do this using tickPadding. Where you define xAxis, just add .tickPadding(15) (change 15 to the number of pixels you want).
Example here: http://jsfiddle.net/henbox/5q4k2r0p/1/
Below code draws a circle and an x axis. There are a couple of problems. The y axis is not displayed but it is being added :
svgContainer.append('g')
.attr("class", "axis")
.call(yAxis);
The x axis is not being aligned to bottom but I have set the orientation to bottom :
orient("bottom").ticks(5);
here is complete code :
<!DOCTYPE html>
<html>
<head>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
</head>
<body>
<script>
var svgContainer = d3.select("body").append("svg")
.attr("width", 1000)
.attr("height", 1000);
var circle = svgContainer.append("circle")
.attr("cx", 150)
.attr("cy", 150)
.attr("r", 100)
.attr("fill", "none")
.attr("stroke" , "red")
.attr("stroke-width" , 2);
var x = d3.scale.linear().range([0, 1000]);
var y = d3.scale.linear().range([0, 1000]);
var xAxis = d3.svg.axis().scale(x)
.orient("bottom").ticks(5);
var yAxis = d3.svg.axis().scale(y)
.orient("left").ticks(5);
svgContainer.append('g')
.attr("class", "axis")
.call(xAxis);
svgContainer.append('g')
.attr("class", "axis")
.call(yAxis);
</script>
</body>
</html>
fiddle : http://jsfiddle.net/zzz8svuq/1/
Why are these issues occurring ?
Setting the orientation only affects the placement of the labels with respect to the axis line, D3 won't automatically position the axis on the canvas for you. The way this is usually done is to set a margin for the axes and offset the containers accordingly:
svgContainer.append('g')
.attr("class", "axis")
.attr("transform", "translate(" + margin + "," + (1000 - margin) + ")")
.call(xAxis);
svgContainer.append('g')
.attr("class", "axis")
.attr("transform", "translate(" + margin + ",0)")
.call(yAxis);
Complete demo here.
I'm trying to draw an x-axis label for one of my d3 graphs, and I'm having a lot of trouble positioning it below the axis itself. Here is my current code:
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
.append("text")
.attr("x", (width / 2))
.style("text-anchor", "middle")
.text("Users ordered by contribution");
And here is a screenshot of the problem. Is there a quick fix?
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
.append("text")
.attr("x", (width / 2))
.attr("y", height) //set your y attribute here
.style("text-anchor", "middle")
.text("Users ordered by contribution");
You can set your y position attribute for your svg text as per above