用d3一张svg上画多个雷同的图（只介绍js文件，文件写好直接引用即可）

一张图包含的内容

两条坐标轴、三处文字提示

最后的效果图是下面这样子的：

首先建立一个svg，确定他的大小、背景颜色：

var width = 1520;
var height = 160;

var svg = d3.select('#all')
	.append('svg')
    .attr('width', width)
    .attr('height', height)
    .attr('fill', 'red')

写完之后屏幕还是白色的，但是这里的svg背景是红色

因为要画6张图所以我们写一个循环，这个循环里面要涉及每一个坐标轴的起点还有右上角的文字，这三者都和他们是第几张图有关系，所以我们可以写一个函数，函数的参数就包括这三个变量：下面先看循环：

raw: function() { // 画背景
        for (let i = 0; i < 6; ++i) {
            this.DrawBackground(10 + (i % 6) * 250, 10 + parseInt(i / 6) * 150, i + 1);
        }
    }

这里会发现不加this.的话会报错而且不会展示图形了。

函数展示：

const Scatter = {
    DrawBackground: function(startX, startY, peopleID) {
        var xScale = d3.scaleLinear()
            .domain([1, 20]).range([0, 220]);
        var yScale = d3.scaleLinear()
            .domain([0, 6]).range([120, 0]);
        var xAxis = d3.axisBottom(xScale)
            .ticks(20);
        var yAxis = d3.axisLeft(yScale)
            .ticks(7);
        var gx = svg.append("g")
            .attr("transform", "translate(" + (startX + 15) + ", " + (startY + yScale(0) + 10) + ")")
            .call(xAxis)
            .attr('font-size', 6)
            .append('text')
            .text('文字')
            .attr("text-anchor", "end") //字体尾部对齐
            .attr("dx", "39em") //表示以轴最后一个点的位置为基准，在它下面多远的距离
            .attr('dy', '1em')
            .attr('fill', 'black');
        var gy = svg.append("g")
            .attr("transform", "translate(" + (startX + 15) + ", " + (startY + 10) + ")")
            .call(yAxis)
            .attr('font-size', 6)
            .append('text')
            .text('文字')
            .attr("text-anchor", "end") //字体尾部对齐
            .attr("dx", "1em")
            .attr('dy', '-0.5em')
            .attr('fill', 'black');
        var background = svg.append('g')
            .append('rect')
            .attr('x', startX)
            .attr('y', startY)
            .attr('width', 250)
            .attr('height', 150)
            .attr('stroke', 'black')
            .attr('fill', 'none')
            .attr('stroke-dasharray', 1.5)
        var peopleID = svg.append('g')
            .append('text')
            .attr('x', startX + 240)
            .attr('y', startY + 10)
            .attr('font-size', 8)
            .attr("text-anchor", "end") //字体尾部对齐
            .text(peopleID);
    },

结束.