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

Answer 2

如果你看documentation，你会看到：

无论方向如何，轴始终都会在原点处渲染。

所以，你的轴在那里，但是在SVG的最顶层，你看不到它。

解决方案：您必须将其翻译下来：

svg.append('g')
    .attr('class', 'xAxis')
    .attr("transform", "translate(0," + margin.top + ")")
    .call(xAxis);

这是一个带有（*）代码的演示：

var margin = {top: 40, right: 20, bottom: 20, left: 20};
var svgWidth = 500;
var svgHeight = 200;
var height = svgHeight - margin.top - margin.bottom;
var width = svgWidth - margin.left - margin.right;

var svg = d3.select('body')
.append('svg')
.attr('width', svgWidth)
.attr('height', svgHeight)
.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');

var x = d3.scale.linear()
	.range([0, width]);

 var xAxis = d3.svg.axis()
.scale(x)
.orient('top')
.innerTickSize(-height);

 svg.append('g')
.attr('class', 'xAxis')
.attr("transform", "translate(0," + margin.top + ")")
.call(xAxis);

path, line {
	fill: none;
	stroke: black;
	shape-rendering: crispEdges;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

*：您的代码是完整的问题，从未定义的变量和属性到缺少的引号。我建议你修改它。除此之外，翻译SVG（不起作用）没有意义，代码的一部分需要一个组。

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

2 个答案: