D3JS 实现绘制折线效果（svg）
warning:
这篇文章距离上次修改已过230天，其中的内容可能已经有所变动。
以下是使用D3.js在SVG中绘制折线图的简单示例代码：
// 假设已经在HTML中通过<script>标签引入了D3.js库
// 创建SVG容器
var svg = d3.select("body").append("svg")
.attr("width", 200)
.attr("height", 200);
// 定义数据
var data = [5, 10, 15, 20, 25];
// 创建路径
var line = d3.line()
.x(function(d, i) { return i * 40; }) // x坐标
.y(function(d) { return d * 5; }); // y坐标
// 绘制折线
svg.append("path")
.attr("d", line(data))
.attr("stroke", "blue")
.attr("stroke-width", 2)
.attr("fill", "none");这段代码会在页面中创建一个200x200像素的SVG容器，并在其中绘制一个蓝色的折线。折线的数据是一个简单的数组，包含5个数值，分别对应y轴的5个点。每个点的x坐标是通过索引乘以40得到的，y坐标是数据值乘以5。
评论已关闭