SVG 外的 d3 轴渲染

Question

我正在向 SVG 添加两个轴，但是，y 轴呈现在 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);