Question

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

小提琴：http://jsfiddle.net/zzz8svuq/1/

为什么会出现这些问题？

Answer 1

设置方向仅影响标签相对于轴线的位置，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);

完整演示here。

轴未显示和对齐

1 个答案: