I'm adding two axis to an SVG, however, the y axis is rendered off the left of the SVG:
If I set the orientation to 'right' then it's rendered, but on the left hand side:
The code is like this:
'use strict';
var margins = {top: 50, bottom: 50, left: 50, right: 50};
var dateFormat = d3.time.format('%d-%b-%y')
var svg = d3.select('.graph');
var svgWidth = parseInt(svg.style('width')),
svgHeight = parseInt(svg.style('height'));
var height = svgHeight - margins.top - margins.bottom,
width = svgWidth - margins.left - margins.right;
var dates = [], closes = [];
data.forEach(function(item) {
dates.push(dateFormat.parse(item.date));
closes.push(item.close);
});
var xScale = d3.time.scale().range([0, width]).domain([d3.min(dates), d3.max(dates)]);
var yScale = d3.scale.linear().range([height, 0]).domain([0, d3.max(closes)]);
var xAxis = d3.svg.axis().scale(xScale).orient('bottom');
var yAxis = d3.svg.axis().scale(yScale).orient('right');
svg.append("g")
.attr("class", "x axis")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis);
I'm adding two axis to an SVG, however, the y axis is rendered off the left of the SVG:
If I set the orientation to 'right' then it's rendered, but on the left hand side:
The code is like this:
'use strict';
var margins = {top: 50, bottom: 50, left: 50, right: 50};
var dateFormat = d3.time.format('%d-%b-%y')
var svg = d3.select('.graph');
var svgWidth = parseInt(svg.style('width')),
svgHeight = parseInt(svg.style('height'));
var height = svgHeight - margins.top - margins.bottom,
width = svgWidth - margins.left - margins.right;
var dates = [], closes = [];
data.forEach(function(item) {
dates.push(dateFormat.parse(item.date));
closes.push(item.close);
});
var xScale = d3.time.scale().range([0, width]).domain([d3.min(dates), d3.max(dates)]);
var yScale = d3.scale.linear().range([height, 0]).domain([0, d3.max(closes)]);
var xAxis = d3.svg.axis().scale(xScale).orient('bottom');
var yAxis = d3.svg.axis().scale(yScale).orient('right');
svg.append("g")
.attr("class", "x axis")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis);
Share
Improve this question
asked Dec 16, 2015 at 22:47
BanksySanBanksySan
28.6k36 gold badges125 silver badges230 bronze badges
2 Answers
Reset to default 5The default position of any g
is (0, 0)
and .orient('left')
means that the axis is placed to the left of (0, 0)
, which is outside the scene. You need to manually set the transform
on the g
element which contains the axis:
yAxis.orient('left');
svg.append('g')
.attr('class', 'y axis')
.attr('transform', 'translate(' + [margins.left, margins.top] + ')');
.call(yAxis);
I'd look closer at some of the tried and true examples.
With the remended form you are missing a "drawing area" g
element.
// have an SVG that is the drawing area width/height plus margins
// you don't show your mark-up but it looks like your code is ok
// append a `g` element and translate it to your margins
// you'll do all your drawing to the g element
svg = svg.append("g")
.attr("transform", "translate(" + margins.left + "," + margins.top + ")");
// append axis to this g
// your y-axis will be in the margin, so adjust margins.left to fit
svg.append("g")
.attr("class", "y axis")
.call(yAxis);