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提供默认样式和更短的语法。代替d3.svg.axis和axis.orient，D3 4.0现在为每个方向提供了四个构造函数：d3.axisTop，d3.axisRight，d3.axisBottom，d3.axisLeft。

因此，这个v3语法：

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

应该是第4节：

d3.axisTop(scale);

根据API，d3.axisTop(scale)：

为给定的比例构造一个新的面向顶部的轴生成器，带有空的tick参数，标记大小为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>

什么是＆＃39; .orient（）＆＃39;的替代方案。在新的D3 API中？

1 个答案: