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

【问题标题】：D3 X Axis Text and Tick Line Not VisibleD3 X 轴文本和刻度线不可见
【发布时间】：2017-01-18 18:40:34
【问题描述】：

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

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;
  }
}

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

【问题讨论】：

这是重复的，我刚才回答了同样的问题/问题，但现在找不到了。

标签： javascript d3.js

【解决方案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 + ')');

【讨论】：

【解决方案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;
}

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"&gt;&lt;/script&gt;

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

【讨论】：