新的D3 API中“ .orient（）”的替代方案是什么？

Question

在D3旧API中，有一个orient()函数可沿轴更改刻度位置，例如d3.svg.axis().scale(x).orient("top")

上面的代码的结果是这样的： https : //drive.google.com/open?id=0ByJwk0csqIvZOUd3Ml8wUHhGTG8

但是，在新的API中，我找不到类似的方法。 是否有其他替代方法可以完成类似任务？

Answer 1

更改日志清楚地显示了更改：

D3 4.0提供了默认样式和较短的语法。 现在，D3 4.0可以代替d3.svg.axis和axis.orient为每个方向提供四个构造函数：d3.axisTop，d3.axisRight，d3.axisBottom，d3.axisLeft。

因此，此v3语法为：

d3.svg.axis.scale(scale).orient("top");

在v4中应该是这样的：

d3.axisTop(scale);

根据API， d3.axisTop(scale) ：

为给定的比例构造一个新的面向顶部的轴生成器，其空的刻度参数，刻度尺寸为6且填充值为3。在此方向上，刻度绘制在水平域路径上方。

这是一个非常简单的演示，将d3.axisTop()与d3.axisBottom()进行了比较。 第一个轴使用d3.axisTop() ，而第二个轴使用d3.axisBottom() ：

 var svg = d3.select("svg"); var orientations = ["axisTop", "axisBottom"]; var gX = svg.selectAll(null) .data(orientations) .enter() .append("g") .attr("transform", (d, i) => "translate(0," + (50 + 50 * i) + ")") .each(function(d) { d3.select(this).call(d3[d](d3.scaleLinear().range([10, 290]))) }) 

 <script src="https://d3js.org/d3.v4.min.js"></script> <svg></svg>