D3JsDay12完成制作的压轴，画出图表座标轴

昨天我们绘制了长条图的情况，今天我们再画出所对应的数字座标轴就可以呈现这一份图表了，目前长条图的Y轴部分缺少的就是数值的对应，今天我们要来使用axisAPI来做出座标轴。

axisTop()、axisRight()、axisBottom()、axisLeft

首先你必须先有一个比例尺函式
来自於之前的介绍过的scale，他才能根据你所输入的比例尺制作出对应的座标轴。
以我们之前所做的长条图为例

let scaleY = d3.scaleLinear()
              .domain([0, 320000])
              .range([400,0]);
let axisY = d3.axisRight(scaleY);
console.log(typeof(axisY));

这时候它就会做出座标轴，昨天有提到如果我们如果将range([0,400])的话，此时座标轴的方向将会反转，也就是最上面是0最下面是300000，所以为了让座标轴显示的顺序与长条图的起始点对应，所以我们必须把range()设定400到0，这边使用的方向式Right因此数字将会在轴的右边，另外如果座标轴式水平的话，可以设置axisTop()或axisBottom()

执行到let axisY = d3.axisRight(scaleY)的时候在画面上面依然看不到这个座标轴，到这边我们只是做出一个座标轴的函式，可以想像成这是一个设计蓝图，然後我们还没执行它，你可以用console.log(typeof(axisY))会发现它是一个函式如下图

接下来我们必须带入一个d3选取的元素到函式中渲染出来，这边我们插入一个g标签来群组化这个座标轴然後带入到刚刚所建立的函式
程序码如下

 const g = svg.append("g");
 axisY(g);

这时候你开启开发者人员工具会发现Element栏位多了这些标签。

你尝试着指向这些标签你可以发现其实axis帮你做的事情是建立了一个path来代表整个轴，然後透过line和text标签来呈现数字和数字旁边的横杠之後使用g标签群组起来来呈现整个座标轴。

然後你就可以看到整个完整的座标轴如下

另外刚刚我们使用的是axisRight()函式，所以这些数字刻度会在座标轴的右边我们尝试着渲染axisBottom()函式看看。

let axisY = d3.axisBottom(scaleY);
const g = svg.append("g");
axisY(g);

这时候你会看到如下图，刻度的数字落在轴的下方。

ticks()函数

如果当你渲染出来的轴线需要刻度多一些的时候我们可以用ticks函数来帮我们将座标轴的刻度数量增加，当然没有设定的时候是预设tick(10)，这边数字的意思大致是拆分十等分，但是D3Js会根据你的资料来切分，所以有可能你tick(20)他切分了18等分，并不会刚好完全等於你所切分的函式。

程序码如下

let axisY = d3.axisRight(scaleY)
              .ticks(20);
let g = svg.append("g");
axisY(g);

tickFormat()函数

有时候我们希望使用者在观看轴线的时候不需要这麽多的零，可以自订义轴的文字显示内容，这时候我就可以用tickFormat()函式来做出你想要的格式，例如我们将所有的资料除以10000之後加入"万"
观看以下程序码

let axisY = d3
              .axisRight(scaleY)
              .ticks(5)
              .tickFormat(function (d) {
                return d / 10000 + "万";
              });
const g = svg.append("g");
axisY(g);

这时候你就可以看到轴格式化成你想要的样子如下图

完整程序码如下

 const newTaipei = taipei.map((el) => {
                    el.people_total = Number(el.people_total);
                    el.area = Number(el.area);
                    el.population_density = Number(el.population_density);
                    el.site_id = el.site_id.substr(3);
                    return el;
                });
            
                let padding = 50;
                const svg = d3.select("body")
                            .append("svg")
                            .attr("width", 800)
                            .attr("height", 450);
                let min = d3.min(newTaipei, (d) => d.people_total);
                let max = d3.max(newTaipei, (d) => d.people_total);
                console.log(newTaipei);
                let scaleY = d3.scaleLinear()
                                .domain([0, 320000])
                                .range([400, 0]);

                svg.selectAll("rect")
                    .data(newTaipei)
                    .join("rect")
                    .attr("x", (d, i) => {
                        return padding + i * 60;
                    })
                    .attr("y", (d) => {
                        console.log(scaleY(d.people_total));
                        return scaleY(d.people_total);
                    })
                    .attr("width", 50)
                    .attr("height", (d) => {
                        return 400 - scaleY(d.people_total);
                    })
                    .attr("fill", "orange");
                
                
                svg.selectAll("text")
                  .data(newTaipei)
                  .join("text")
                  .text((d) => {
                      return d.site_id;
                  })
                  .attr("x", (d, i) => {
                      return padding + i * 60;
                  })
                  .attr("y", (y) => {
                      return 450 -20;
                  });
              let axisY = d3
                .axisRight(scaleY)
                .ticks(5)
                .tickFormat(function (d) {
                  return d / 10000 + "万";
                });   
              const g = svg.append("g");
          axisY(g);
        });

最後如下图所示

页面如下

githubPage

githubPpage