javascript - 新 D3 API 中 '.orient()' 的替代项是什么？

Question

在 D3 旧 API 中，有一个 orient() 函数可以改变坐标轴上的刻度位置，比如 d3.svg.axis().scale(x).orient("top ")

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

然而，在new API我找不到类似的方法。有没有其他方法可以完成类似的任务？

Answer 1

changelog清楚变化:

D3 4.0 provides default styles and shorter syntax. In place of d3.svg.axis and axis.orient, D3 4.0 now provides four constructors for each orientation: d3.axisTop, d3.axisRight, d3.axisBottom, d3.axisLeft.

因此，这个 v3 语法:

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

在 v4 中应该是这样的:

d3.axisTop(scale);

根据 API，d3.axisTop(scale):

Constructs a new top-oriented axis generator for the given scale, with empty tick arguments, a tick size of 6 and padding of 3. In this orientation, ticks are drawn above the horizontal domain path.

这是一个非常简单的演示，比较了 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>