下面的代码绘制了一个圆和一个 x 轴。有几个问题。 y 轴未显示，但正在添加:
svgContainer.append('g')
.attr("class", "axis")
.call(yAxis);
x 轴未与底部对齐，但我已将方向设置为底部:
orient("bottom").ticks(5);
这里是完整的代码:
<!DOCTYPE html>
<html>
<head>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
</head>
<body>
<script>
var svgContainer = d3.select("body").append("svg")
.attr("width", 1000)
.attr("height", 1000);
var circle = svgContainer.append("circle")
.attr("cx", 150)
.attr("cy", 150)
.attr("r", 100)
.attr("fill", "none")
.attr("stroke" , "red")
.attr("stroke-width" , 2);
var x = d3.scale.linear().range([0, 1000]);
var y = d3.scale.linear().range([0, 1000]);
var xAxis = d3.svg.axis().scale(x)
.orient("bottom").ticks(5);
var yAxis = d3.svg.axis().scale(y)
.orient("left").ticks(5);
svgContainer.append('g')
.attr("class", "axis")
.call(xAxis);
svgContainer.append('g')
.attr("class", "axis")
.call(yAxis);
</script>
</body>
</html>
fiddle :http://jsfiddle.net/zzz8svuq/1/
为什么会出现这些问题？
最佳答案
设置方向只会影响标签相对于轴线的位置，D3 不会自动为您在 Canvas 上定位轴。通常完成此操作的方法是设置轴的边距并相应地偏移容器:
svgContainer.append('g')
.attr("class", "axis")
.attr("transform", "translate(" + margin + "," + (1000 - margin) + ")")
.call(xAxis);
svgContainer.append('g')
.attr("class", "axis")
.attr("transform", "translate(" + margin + ",0)")
.call(yAxis);
完整演示 here .
关于javascript - 轴不显示和对齐，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25850362/