Javascript 轴未显示和对齐_Javascript_D3.js

Javascript 轴未显示和对齐

javascript d3.js

Javascript 轴未显示和对齐,javascript,d3.js,Javascript,D3.js,下面的代码绘制了一个圆和一个x轴。有几个问题。y轴不显示，但正在添加： svgContainer.append('g') .attr("class", "axis") .call(yAxis); x轴未与底部对齐，但我已将方向设置为底部： orient("bottom").ticks(5); 以下是完整的代码： <!DOCTYPE html> <html> <head> <script src="http:/

下面的代码绘制了一个圆和一个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>


var svgContainer=d3.select（“body”）.append（“svg”）
.attr（“宽度”，1000）
.attr（“高度”，1000）；
var circle=svgContainer.append（“circle”）
.attr（“cx”，150）
.attr（“cy”，150）
.attr（“r”，100）
.attr（“填充”、“无”）
.attr（“笔划”、“红色”）
.attr（“笔划宽度”，2）；
var x=d3.scale.linear（）范围（[0，1000]）；
变量y=d3.scale.linear（）.range（[0，1000]）；
var xAxis=d3.svg.axis（）.scale（x）
.方向（“底部”）。刻度（5）；
var yAxis=d3.svg.axis（）.scale（y）
.方向（“左”）。勾号（5）；
svgContainer.append（'g'）
.attr（“类”、“轴”）
.呼叫（xAxis）；
svgContainer.append（'g'）
.attr（“类”、“轴”）
.呼叫（yAxis）；

小提琴：

为什么会出现这些问题？

设置方向只会影响标签相对于轴线的位置，D3不会自动为您在画布上定位轴。通常的做法是为轴设置边距，并相应地偏移容器：

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

完成演示。

注意到我不正确地缩放y轴，所以使用了var y=d3.scale.linear（）.range（[1000，0]）；而不是var y=d3.scale.linear（）.range（[0，1000]）；