d3 版本 4 中的“d3.svg.axis()”是什么？

Question

如何用新版本的 D3 API 替换以下行？

我已经将

scale.linear()

替换为

scaleLinear()

var xRange = d3.scaleLinear()
    .domain([OIResults.min,OIResults.max]).range([40, 360]);

var yRange = d3.scaleLinear()
    .domain(y_domain).range([360, 40]);

以下几行需要根据新的 API 进行替换：

var xAxis = d3.svg.axis().scale(xRange).tickFormat(function(d) { return d.x;});
var yAxis = d3.svg.axis().scale(yRange).orient("left");

Answer 1

D3 v4 API 在这里。根据变更日志：

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

因此，这些行应该是：

var xAxis = d3.axisBottom(xRange).tickFormat(function(d){ return d.x;});
var yAxis = d3.axisLeft(yRange);

---

PS：我假设您希望刻度线位于轴下方，这通常是这种情况，因为您没有在原始行中显示

orient

。

PPS：在撰写本文时，链接文档适用于 D3 v4。警告，讲师：这可以随时更改（请参阅下面的评论）。