我们想把每个坐标标记到上文的散列图旁边。于是我们再定义一个x轴的比例尺。 ``` var xScale = d3.scaleLinear() //线性比例尺 .domain([0, dataset.length]) //值域的范围为数据的个数 .rangeRound([space, w - space]) //映射到可视的区域，修改可视区域 ``` svg 也需要定义一下。 ``` var svg = d3.select('body').append('svg') .attr('width', w).attr('height', h); ``` 这样就可以完成标签显示了 。 ``` svg.selectAll('text') .data(dataset).enter().append('text') .attr('x', (d, i) => padding + xScale(i)) .attr('y', d => yScale(d[1])) .text(d => '(' + d[0] + ',' + d[1] + ')'); ``` 完成的代码如下： ``` var dataset = [ [1, 1], [2, 3], [5, 8], [13, 21], [34, 55] ]; var w = 500; var h = 200; var padding = 3; //两个柱形之间的缝隙 var space = 50; //svg四周留白 var x_width = (w - padding * dataset.length) / dataset.length; // 横坐标的宽度 var xScale = d3.scaleLinear() //线性比例尺 .domain([0, dataset.length]) //值域的范围为数据的个数 .rangeRound([space, w - space]) //映射到可视的区域，修改可视区域 var yScale = d3.scaleLinear() //线性比例尺 .domain([0, d3.max(dataset, d => d[1])]) //值域的范围 .rangeRound([h - space, space]) //映射到可视的区域，修改可视区域 var rScale = d3.scaleSqrt() //平方根比例尺 .domain([0, d3.max(dataset, d => d[1])]) .rangeRound([padding, 20 - padding]) //修改可视区域 var yAxis = d3.axisBottom(yScale); var svg = d3.select('body').append('svg') .attr('width', w).attr('height', h); svg.selectAll('circle').data(dataset).enter().append('circle') .attr('cx', (d, i) => space + i * (x_width + padding)) //圆心的x .attr('cy', d => yScale(d[1])) //圆心的y，注意坐标0点在左上角 .attr('r', d => rScale(d[1])) //取y的平方根作为半径 .attr('fill', 'teal') var yAxis = d3.axisLeft(yScale) .ticks(2); svg.selectAll('text') .data(dataset).enter().append('text') .attr('x', (d, i) => padding + xScale(i)) .attr('y', d => yScale(d[1])) .text(d => '(' + d[0] + ',' + d[1] + ')'); svg.append('g') .attr('transform', 'translate(' + space / 2 + ', ' + '0)') .call(yAxis); ``` 在浏览器中的显示如下：