基本折线图- D3.js

在线地址：https://scqilin.github.io/d3js/basic-chart/index.html

在这个教程里，我们将会探讨如何使用D3.js创建一个基本的折线图。首先，我们来看看完整的代码：

	// 定义数据集
    var dataset = [
        { name: "苹果", value: 50 },
        { name: "橙子", value: 30 },
        { name: "香蕉", value: 70 },
        { name: "核桃", value: 20 },
        { name: "芒果", value: 60 },
        { name: "梨子", value: 100 },
        { name: "菠萝", value: 80 },
        { name: "葡萄", value: 90 },
        { name: "草莓", value: 35 },
        { name: "西瓜", value: 75 },
        { name: "桃子", value: 55 },
        { name: "樱桃", value: 25 }
    ];

	// 定义画布大小和间距
    var padding = 30;
    var svgWidth = 600;
    var svgHeight = 400;

	// 定义x轴比例尺
    var xScale = d3.scaleBand()
        .domain(d3.range(dataset.length)) // 输入域，从0到数据长度
        .range([padding, svgWidth - padding]) // 输出域，从左右边缘开始
        .padding(0) // 设置柱子之间的间隙
        .paddingInner(1) // 设置柱子内部的间隙

	// 定义y轴比例尺
    var yScale = d3.scaleLinear()
        .domain([0, d3.max(dataset, function (d) { return d.value; })]) // 输入域，从0到最大元素值
        .range([svgHeight - padding, padding]); // 输出域，从下到上边缘开始

	// 创建SVG元素，并设置边框
    var svg = d3.select("body")
        .append("svg") // 在body内添加一个svg元素
        .attr("width", svgWidth)
        .attr("height", svgHeight)
        .style('border', '1px solid #999999')


    var line = d3.line() // 创建折线生成器
        .x(function (d, i) {
            return xScale(i) + xScale.bandwidth() / 2; // 每个X坐标用比例尺进行缩放，并加上柱状图宽度的一半，确保在柱中央插入点
        })
        .y(function (d) {
            return yScale(d.value); // 缩放Y坐标
        })
        .curve(d3.curveCardinal); // 添加曲线样式

    svg.append("path") // 向SVG元素中添加路径
        .datum(dataset) // 数据源
        .attr("class", "line") // CSS类名
        .attr("d", line) // 路径数据
        .attr("fill", "none") // 填充颜色
        .attr("stroke", "#69b3a2") // 线条颜色
        .attr("stroke-width", "3px"); // 线宽

	// 定义x轴和y轴
    var xAxis = d3.axisBottom(xScale) // 构建x轴比例尺
        .tickFormat(function (d, i) {
            return dataset[i].name; // x轴的数据标签
        })
    var yAxis = d3.axisLeft(yScale); // 构建y轴比例尺

	// 添加x轴和y轴
    svg.append("g")
        .attr("class", "x-axis") // CSS类名
        .attr("transform", "translate(0," + (svgHeight - padding) + ")") // 坐标系偏移
        .call(xAxis); // 插入坐标轴

    svg.append("g")
        .attr("class", "y-axis") // CSS类名
        .attr("transform", "translate(" + padding + ",0)") // 坐标系偏移
        .call(yAxis); //

代码解析

定义数据集

在这个例子中，我们用Javascript数组dataset=[]来存放数据集。每一条数据由对象的形式来表示，包含了元素的名称和值。这些数据将会被用于x轴和y轴比例尺的构建。

定义画布大小和间距

这三个变量分别定义了SVG画布的宽度、高度和边缘内边距。width和height属性是必须的，因为它们指定了SVG画布的大小。padding变量在这里则是为了设置折线图的空白区（margins）。

定义x轴比例尺

D3.js中的scaleBand()函数可以创建具有等间距矩形的比例尺。我们使用这个函数将所有数据点位置映射到画布上。在这个例子中，domain()定义输入域为从0到数据长度；range()定义输出范围从左右边缘开始；padding()和paddingInner()可以进一步调整柱宽和内部间距。

定义y轴比例尺

我们使用d3.scaleLinear()来创建线性比例尺，用于将数据点的y坐标映射到画布上。这个例子中，domain()定义输入域为从0到最大元素值(即70)，range()定义输出范围从下到上边缘开始。

创建SVG元素，并设置边框

D3.js中的.select()函数用于选择文档中的一个元素。在这个例子里我们选择了<body>；.append("svg")则是添加SVG元素至该容器内。通过.attr()设置元素的属性（如宽度、高度等），并使用.style()定义样式。

创建折线生成器

折线生成器(line generator)是由d3.line()方法创建的，它会将数据点转换为SVG路径指令。这个例子中，我们使用了curveCardinal属性来使得路径更光滑。

向SVG元素中添加折线路径

我们使用了datum()方法把数据集绑定到路径上，由line()方法把它们转化成SVG路径指令。fill和stroke属性则定义了填充颜色和线条颜色。同时，CSS类名也被添加给路径元素。

定义x轴和y轴

xAxis变量使用axisBottom函数来构建x轴比例尺，tickFormat()方法用于设置坐标轴标签。yAxis同理使用axisLeft()方法来构建y轴。

添加x轴和y轴

通过append()方法向SVG元素添加一个g元素，作为坐标系(axis)的容器。g元素包含X轴和Y轴，并通过call()方法使其出现在画布上。同时，与容器相关的css类都被定义在了对应的g元素上。

总结

在本教程中，我们使用D3.js创建了一个简单的折线图。通过定义数据集、比例尺、路径生成器以及坐标轴等组件，我们将数据转化为可视化展示。使用D3.js与SVG结合，可以轻松地创建各种图表，并且可以根据需求进行交互和动画效果的设计。

【d3.js入门】基本折线图

基本折线图- D3.js

代码解析

总结