修饰添加数轴的散点图

1、修饰添加数轴的散点图摘 要：这一节主要介绍了修饰添加数轴的散点图的方法。并给出相关代码。关键词：散点图；数轴 1优化刻度数轴的刻度线（tick）是用来传达信息的，但也不是越多越好，多过某个数量，刻度线反而会让图表显得混乱。到现在为止，我们还没有指定数轴上要显示多少根刻度线，也没有指定两根刻度线的间距。就在我们全无指示的情况下，D3 自动检测了比例尺xScale，从而作出了有数量依据的判断，帮我们确定了要画多少刻度线，以及刻度线之间的间隔（这里是50 像素）。当然，你可以干预数轴的任何方面。比如，使用ticks() 方法就可以粗略地指定刻度线的数量：var xAxis = d3.svg.axis

2、().scale(xScale).orient("bottom").ticks(5); / 粗略地设置刻度线的数量通过图可以看到，尽管我们设置了5 根刻度线，但D3 则擅自作主，画出了7根。这是D3发现5 根刻度线会把输入值域切分成不够恰当的值（也就是0、150、300、450 和600）。D3 只将ticks() 的值作为一个建议，如果它发现有更清晰更方便理解的值（比如以100 为间隔），哪怕比你设置的值多一点或少一点，它也会采用。实际上，这是一个非常出彩的功能，可以确保设计的可伸缩性。随着数据集的变化，输入值域的扩大或缩小（数值变得更大或更小），D3 都可以保证刻度标签

3、的数量合适而且易读。图1使散点图刻度线变少2垂直数轴接下来该考虑一下垂直方向的数轴了。通过复制修改为xAxis 而写的代码，可以在代码的顶部添加如下几行：/ 定义y 轴var yAxis = d3.svg.axis().scale(yScale).orient("left").ticks(5);而在代码底部添加如下几行：/ 创建y 轴svg.append("g").attr("class", "axis").attr("transform", "translate(" + p

4、adding + ",0)").call(yAxis);看看图，y 轴的标签左对齐，而yAxis 的分组g 向右平移了预先设定的边距。现在看起来像是个真正的图表了！但yAxis 的标签被切掉了一些。为了增大标签左侧的空间，我们把边距的值由20 加到30：var padding = 30;图2添加y 轴后的散点图3润色接下来，为了证明新坐标轴是动态可伸缩的，我们把静态的数据集改成随机生成的：/ 动态的随机生成的数据集var dataset = ;var numDataPoints = 50;var xRange = Math.random() * 1000;var yRang

5、e = Math.random() * 1000;for (var i = 0; i < numDataPoints; i+) var newNumber1 = Math.floor(Math.random() * xRange);var newNumber2 = Math.floor(Math.random() * yRange);dataset.push(newNumber1, newNumber2);这里首先初始化了一个空数组，然后循环50 次，每次选择两个随机数值，添加（push()）到数据集的数组中图3根据随机数据生成的散点图每次刷新页面，都会生成不同的数据集。注意，数轴会随着输