直接接着上一章的图表,继续加上一个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>