用d3.js做一个svg的进度条
时间: 2023-06-12 15:02:24 浏览: 106
好的,您可以参考以下代码进行实现:
HTML部分:
```html
<div id="progress_bar">
<svg width="400" height="50">
<rect x="10" y="10" width="370" height="30" rx="15" ry="15" fill="#efefef" />
<rect x="10" y="10" width="0" height="30" rx="15" ry="15" fill="#86c349" id="progress" />
</svg>
</div>
```
JavaScript部分:
```javascript
var data = [0] //进度条当前进度,初始值为0
var svg = d3.select("#progress")
.datum(data)
.attr("width", function (d) { return d + "%" }) //设置进度条宽度
.on("click", function () { increase_progress_bar(data) }); //点击进行增加
function increase_progress_bar(data) {
if (data[0] < 100) {
data[0] += 10; //每次增加10%
svg.transition()
.duration(500)
.attr("width", function (d) { return d + "%" });
}
}
```
通过以上代码,您可以完成一个基于d3.js的简单的进度条。当您点击进度条时,进度条会增加10%,最大值是100%。您可以通过修改代码自定义进度条的样式和功能。