d3.js 画线

d3.js 是一个用于数据可视化的 JavaScript 库，它允许开发者通过操作 DOM、SVG、Canvas 等来创建复杂的交互式图表。在 d3.js 中画线通常涉及到以下几个步骤：

基础概念

数据绑定：d3.js 的核心思想是将数据绑定到 DOM 元素上，然后对这些元素进行操作。
选择器：用于选择 DOM 元素进行操作。
数据驱动文档：通过数据来驱动文档（DOM）的变化。

画线优势

灵活性：可以创建高度定制化的图表。
交互性：可以轻松添加交互功能，如鼠标悬停提示、点击事件等。
动态性：数据更新时，图表可以自动更新。

类型

静态线图：用于展示不随时间变化的数据。
动态线图：用于展示随时间或其他变量变化的数据，如股票价格走势图。

应用场景

金融分析：股票价格走势、汇率变化等。
科学可视化：实验数据、模拟结果等。
业务分析：销售趋势、用户活跃度等。

画线示例代码

以下是一个简单的 d3.js 画线示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>D3.js Line Chart</title>
<script src="https://d3js.org/d3.v7.min.js"></script>
</head>
<body>
<svg width="600" height="400"></svg>
<script>
// 数据集
const data = [10, 20, 30, 40, 50, 60, 70];

// 设置 SVG 的宽度和高度
const svg = d3.select("svg");
const width = +svg.attr("width");
const height = +svg.attr("height");

// 创建比例尺
const xScale = d3.scaleLinear()
    .domain([0, data.length - 1])
    .range([0, width]);

const yScale = d3.scaleLinear()
    .domain([0, d3.max(data)])
    .range([height, 0]);

// 创建线生成器
const line = d3.line()
    .x((d, i) => xScale(i))
    .y(d => yScale(d));

// 添加路径元素
svg.append("path")
    .datum(data)
    .attr("fill", "none")
    .attr("stroke", "steelblue")
    .attr("stroke-width", 2)
    .attr("d", line);
</script>
</body>
</html>