javascript - D3 X 轴文本和刻度线不可见

Question

我在使用 D3 图表时遇到问题，其中 x 轴文本和刻度线不可见。我可以看到这两个元素都正确放置在图表上的 Web 检查器中，并且刻度线上有笔划和笔划宽度，但我认为我缺少另一部分。这是我的代码的相关部分:

var parentContainer = window.getComputedStyle(document.getElementById('#svgContainer'));
var margins = {top: 40, right: 20. bottom: 20, left: 20};
var svgWidth = parentContainer.width;
var svgHeight = parentContainer.height;
var height = svgHeight - margin.top - margin.bottom;
var width = svgWidth - margin.left - margin.right;

var svg = d3.select('svgContainer')
.append('svg')
.attr('width', svgWidth)
.attr('height', svgHeight)
.attr('transform, 'translate(' + margin.left + ',' + margin.top + ')');

 var xAxis = d3.svg.axis()
.scale(x)
.orient('top')
.innerTickSize(-height);

 svg.append('g')
.attr('class', 'xAxis')
.call(xAxis);

这是我的 CSS/LESS:

#svgContainer {
width: 100%;
height: 500px;
.tick {
  line {
    fill: none;
    stroke: black;
  }
  text {
    font-size: 14px;
  }
}

我没有包含图表代码的其余部分，因为它似乎工作正常 - 轴线和文本位于正确的位置和正确的间隔，只是不可见。不知道我错过了什么。谢谢!

Answer 1

使用包含减去的边距值的高度/宽度。

var height = svgHeight - margin.top - margin.bottom;
var width = svgWidth - margin.left - margin.right;

var svg = d3.select('svgContainer')
.append('svg')
.attr('width', width)
.attr('height', height)
.attr('transform, 'translate(' + margin.left + ',' + margin.top + ')');