本章要绘制散列图，需要用到线性比例尺和平方根比例尺。线性比例尺已在上面介绍过，下面介绍平方根比例尺。 ## 平方根比例尺 平方根比例尺与线下比例尺的使用方法一样。输入和输出的头尾也相互对应，但是中间的映射过程并不是线性的，二是符合平方根变化。 ~~~ let scale = d3.scaleSqrt().domain([1,100]).range([0,10]) //scale(50) = 6.74563090207275 ~~~ 散点图是在两个不同坐标轴（水平轴和竖直轴）上表现两组对应值的常见图表。 ``` var dataset = [[1, 1], [2, 3], [5, 8], [13, 21], [34, 55]]; var w = 500; var h = 200; var padding = 3; //两个柱形之间的缝隙 var x_width = (w - padding * dataset.length) / dataset.length; // 横坐标的宽度 var yScale = d3.scaleLinear() //线性比例尺 .domain([0, d3.max(dataset, d=>d[1])]) //值域的范围 .range([0, h]); //映射到可视的区域 var rScale = d3.scaleSqrt() //平方根比例尺 .domain([0, d3.max(dataset, d=>d[1])]) .range([0, 20]); var data = [0.243, 0.584, 0.987, 0.153, 0.433]; var extent = d3.extent(data); d3.select('body').append('svg') .attr('width', w).attr('height', h) .selectAll('circle').data(dataset).enter().append('circle') .attr('cx', (d, i) => i * (x_width + padding)) //圆心的x .attr('cy', d => h - yScale(d[1])) //圆心的y，注意坐标0点在左上角 .attr('r', d => rScale(d[1])) //取y的平方根作为半径 .attr('fill', 'teal') ``` 效果如下。之所以用到平方根比例尺，是因为我们把数据看成是面积，我们想返回半径大小。而面积和半径大小就是平方根关系，至于还有一个系数`pi`，那个并不影响视觉。好像有的圆离开可视区域，我们下一章解决这个问题，让你更深刻的理解可视区域。后面还会谈到分组平移的思想，也解决这个问题。