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轴。轴的位置取决于方向和应用的变换。方向可以是＆＃34; bottom＆＃34;，＆＃34; top＆＃34;，＆＃34; left＆＃34;或＆＃34;对＆＃34;。底部和顶部指定水平轴，其中刻度线分别位于轴的上方或下方，而左侧和右侧指定垂直轴，刻度线分别位于轴的左侧或右侧。 d3不知道哪个是x轴，哪个是y轴。它只是知道有轴并将它们绘制在.orient和转换告诉它的地方。当然人们倾向于称为横轴＆＃34; xAxis＆＃34;或类似的东西，但你可以称之为＆＃34; yAxis＆＃34;它仍将被绘制为水平轴。变换定位轴。因此，如果删除x轴的变换，它将不再被转换＆＃34; h - padding＆＃34;从顶部向下的像素，但相反将出现在其容器的顶部。如果你删除y轴的变换，它将被绘制在容器的（0,0），即左上角，并将向上延伸，但你不能看到它，因为它会扩展在容器的可见区域之外。

请点击此处了解详情：https://github.com/mbostock/d3/wiki/SVG-Axes

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

1 个答案: