直接接着上一章的圖表，繼續加上一個x坐標軸
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>scaleLinear</title> <script src="https://d3js.org/d3.v5.min.js"></script> </head> <body> <svg width="100%" height="300"></svg> </body> <script> var data = [7.3,5.3,3.3,2.3,1.3]; //定義比例尺 var scaleLinear = d3.scaleLinear().domain([0,d3.max(data)]).range([0,800]); var g = d3.select('svg') .append('g') .attr('transform','translate(30,30)'); var rectHeight = 30; g.selectAll('rect') .data(data) .enter() .append('rect') .attr('x',0) .attr('y',function (d,i) { return rectHeight*i; }) .attr('width',function (d,i) { return scaleLinear(d);//在這里的得到 映射的寬度 }) .attr('height',rectHeight - 5) .attr('fill','pink'); //定義一個x坐標軸 坐標軸的比例尺 我們跟圖表的用一個 var axisX = d3.axisBottom(scaleLinear).ticks(20);//ticks 用來設置刻度間隔 其實就是把data數據 根據咱們的參數20 重新調整一下 g.append('g')//在原有分g矩形分組里 再加一個x軸分組 .attr('transform','translate(0,'+ data.length*rectHeight +')') .call(axisX); </script> </html>
