D3轴渲染在SVG外部

Question

我正在为SVG添加两个轴，但是y轴在SVG的左侧被渲染：

如果我将方向设置为“ right”，则会显示，但在左侧手边：

代码如下：

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

- BanksySan

Answer 1

任何 g 的默认位置都是(0, 0)，而.orient('left')表示该轴被放置在(0, 0)左侧，也就是场景之外。您需要在包含轴的g元素上手动设置transform。

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

- musically_ut

---

有关如何计算轴宽的任何提示吗？例如，1.0需要比1,000.00少得多的填充。 - Ian

很遗憾，除了“渲染”所有刻度（或者将它们全部转换为字符串，然后使用最大宽度，或者实际上将其呈现到屏幕外的<text>并查看其边界框），找到所需的最大空间，然后更新图表的所有组件以外，没有其他更好的办法。通常情况下，这种方法足以使用，但是如果刻度变化不大，则经常会造成麻烦。 - musically_ut

谢谢 - 是的，我注意到使用 dimple.js 时会出现这样的问题。我想我得手动解决它！ - Ian

Answer 2

我建议您仔细查看一些已经证明可行的示例和实践。

使用建议的形式，您会缺少一个“绘图区域”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);

- Mark