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

Question

因此，我最近正在学习d3，并遇到一个小问题：当人们创建x轴和y轴时，如何从代码中知道首先创建哪个轴？

例如：

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

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

对于此代码，我真的找不到创建x轴或y轴的区别吗？ 是因为转换功能吗？ 但是，当我同时删除x和y的转换函数时，x返回顶部，而y消失了，到底发生了什么？ 有默认功能吗？

代码源：Scott Murray的http://alignedleft.com/content/03-tutorials/01-d3/160-axes/6.html 。

Answer 1

首先创建的轴是第一个（使用.call（））的轴，在这种情况下，它是x轴。 轴的位置取决于方向和所应用的变换。 方向可以是“底部”，“顶部”，“左侧”或“右侧”。 底部和顶部指定水平轴，刻度线分别位于该轴的上方或下方，而左侧和右侧指定垂直轴，刻度线分别位于该轴的左侧或右侧。 d3不知道哪个是x轴，哪个是y轴。 它只是知道有轴，并在.orient和变换告诉它的地方绘制它们。 自然，人们倾向于将水平轴称为“ xAxis”或类似名称，但您可以将其称为“ yAxis”，并且仍将其绘制为水平轴。 变换将定位轴。 因此，如果删除x轴的转换，它将不再从顶部向下转换“ h-padding”像素，而是显示在其容器的顶部。 如果删除y轴的变换，它将在容器的（0,0）处绘制，即左上角，并且将向上延伸，但是您将无法看到它，因为它将延伸到y轴之外容器的可见区域。

请参阅此处以获取更多详细信息： https : //github.com/mbostock/d3/wiki/SVG-Axes