d3.js如何分辨X轴和Y轴之间的区别？

Question

So I am learning d3 lately and run into one small question: when people create x-axis and y-axis, how can you tell from the code which axis is being created first?

for example:

          .......
          .......

        //Create scale functions
        var xScale = d3.scale.linear()
                             .domain([0, d3.max(dataset, function(d) { return d[0]; })])
                             .range([padding, w - padding * 2]);

        var yScale = d3.scale.linear()
                             .domain([0, d3.max(dataset, function(d) { return d[1]; })])
                             .range([h - padding, padding]);


          .......
          .......
        //Define X axis
        var xAxis = d3.svg.axis()
                          .scale(xScale)
                          .orient("bottom")
                          .ticks(5);

        //Define Y axis
        var yAxis = d3.svg.axis()
                          .scale(yScale)
                          .orient("left")
                          .ticks(5);


          .......
          .......

        //Create X axis
        svg.append("g")
            .attr("class", "axis")
            .attr("transform", "translate(0," + (h - padding) + ")")
            .call(xAxis);

        //Create Y axis
        svg.append("g")
            .attr("class", "axis")
            .attr("transform", "translate(" + padding + ",0)")
            .call(yAxis);

For this code, I couldn't really find the difference between creating x-axis or y-axis? Is it because of the transform functions? However, when I delete the transform functions for both x and y, the x goes back to the top while the y disappear, what really happened? Is there a default function?

code source: http://alignedleft.com/content/03-tutorials/01-d3/160-axes/6.html by Scott Murray.

Answer 1

The axis that gets created first is the one called first (with .call()), which in this case is the x-axis. The position of the axis depends on the orientation and the transformation applied. The orientation can be "bottom", "top", "left" or "right". Bottom and top specify a horizontal axis with ticks positioned either above or below the axis respectively, while left and right specify a vertical axis, with ticks either to the left or right of the axis respectively. d3 doesn't know which is the x axis and which is the y axis. It simply knows there are axes and draws them where .orient and the transformation tell it to. Naturally people tend to call a horizontal axis "xAxis" or something like that, but you could call it "yAxis" and it would still be drawn as a horizontal axis. The transformation positions the axis. So if you delete the transformation for the x axis, it will no longer get transformed "h - padding" pixels down from the top, but instead will appear at the top of its container. If you delete the transform for the y axis, it will be drawn at (0,0) of the container, ie the top left corner, and will extend upward but you won't be able to see it because it will extend outside the visible region of your container.

See here for more details: https://github.com/mbostock/d3/wiki/SVG-Axes