d3.js如何区分 X 轴和 Y 轴

How does d3.js tell the difference between X-axis and Y-Axis?

本文关键字：轴和 js 何区 d3      更新时间：2023-09-26

所以我最近在学习 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。

首先创建的轴是第一个调用的轴（使用 .call（）），在本例中为 x 轴。轴的位置取决于方向和应用的变换。方向可以是"底部"、"顶部"、"左"或"右"。底部和顶部指定一个水平轴，刻度分别位于轴的上方或下方，而左和右指定垂直轴，刻度分别位于轴的左侧或右侧。D3 不知道哪个是 X 轴，哪个是 Y 轴。它只是知道有轴，并将它们绘制在 .orient 和转换告诉它的位置。当然，人们倾向于将水平轴称为"xAxis"或类似的东西，但您可以称它为"yAxis"，它仍然会被绘制为水平轴。变换将定位轴。因此，如果您删除 x 轴的变换，它将不再从顶部向下变换"h - 填充"像素，而是出现在其容器的顶部。如果删除 y 轴的变换，它将绘制在容器的 （0，0），即左上角，并将向上延伸，但您将看不到它，因为它将延伸到容器的可见区域之外。

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

相关文章：