оси d3 рендеринга вне SVG

Question

Я добавляю две оси к SVG, однако, ось у визуализируется от левого в SVG:

Если установить ориентацию на «вправо ', то это оказывается, но на левой стороне:

код выглядит так:

'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); 

Answer 1

Положение по умолчанию любого g является (0, 0) и .orient('left') означает, что ось помещается в оставил из (0, 0), которая находится за пределами сцены. Вам нужно вручную установить transform на g элемент, который содержит ось:

yAxis.orient('left'); 
svg.append('g') 
    .attr('class', 'y axis') 
    .attr('transform', 'translate(' + [margins.left, margins.top] + ')'); 
    .call(yAxis); 

Answer 2

Я смотрел ближе на некоторые из tried и true примеров.

С рекомендуемой формой вам не хватает «области рисования» g элемент.

// 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);