d3版本4中的"d3.svg.axis()"是什么? [英] What is 'd3.svg.axis()' in d3 version 4?

问题描述

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

How can I replace below lines with the new version of D3 API?

我已经用scaleLinear()

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

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

下面的行需要根据新的API进行替换:

Below Lines need to be replaced according to the new API:

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

推荐答案

D3 v4 API 在这里.根据更改日志:

The D3 v4 API is here. According to the changelog:

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

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.

因此，这些行应为:

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

---

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

PPS:在撰写本文时，链接的文档适用于D3 v4.告诫者:可能随时更改(请参阅下面的评论).

PPS: At the time of the writing the linked documentation applies to D3 v4. Caveat, lector: that can change at any time (see comments below).

这篇关于d3版本4中的"d3.svg.axis()"是什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！