D3绘制交互式折线图
时间: 2024-01-08 21:03:39 浏览: 29
D3是一个强大的JavaScript库,可以用来创建交互式的折线图。下面是一个使用D3绘制交互式折线图的示例代码:
```javascript
// 创建SVG容器
var svg = d3.select("body")
.append("svg")
.attr("width", 500)
.attr("height", 300);
// 定义数据
var data = [
{ year: 2010, sale: 100 },
{ year: 2011, sale: 200 },
{ year: 2012, sale: 300 },
{ year: 2013, sale: 400 },
{ year: 2014, sale: 500 },
];
// 定义比例尺
var xScale = d3.scale.linear()
.domain([2010, 2014])
.range([0, 400]);
var yScale = d3.scale.linear()
.domain([0, 500])
.range([250, 0]);
// 定义折线生成器
var lineGen = d3.svg.line()
.x(function(d) { return xScale(d.year); })
.y(function(d) { return yScale(d.sale); });
// 绘制折线
svg.append("path")
.attr("d", lineGen(data))
.attr("stroke", "blue")
.attr("stroke-width", 2)
.attr("fill", "none");
// 添加坐标轴
var xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left");
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0, 250)")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis);
```
这段代码首先创建了一个SVG容器,然后定义了一组数据。接下来,使用比例尺将数据映射到坐标轴上。然后,定义了一个折线生成器,用于生成折线的路径。最后,使用折线生成器绘制折线,并添加了坐标轴。