用d3写一个柱状图代码
时间: 2024-01-02 17:05:13 浏览: 73
好的,我可以提供一个简单的d3柱状图代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>D3.js柱状图</title>
<script src="https://d3js.org/d3.v5.min.js"></script>
</head>
<body>
<h2>D3.js柱状图</h2>
<div id="chart"></div>
<script>
// 数据
var data = [4, 8, 15, 16, 23, 42];
// 创建svg画布
var svg = d3.select("#chart")
.append("svg")
.attr("width", 400)
.attr("height", 300);
// 比例尺
var x = d3.scaleBand()
.domain(d3.range(data.length))
.range([0, 400])
.padding(0.1);
var y = d3.scaleLinear()
.domain([0, d3.max(data)])
.range([0, 300]);
// 绘制柱状图
svg.selectAll("rect")
.data(data)
.enter()
.append("rect")
.attr("x", function(d, i) { return x(i); })
.attr("y", function(d) { return 300 - y(d); })
.attr("width", x.bandwidth())
.attr("height", function(d) { return y(d); })
.attr("fill", "steelblue");
</script>
</body>
</html>
```
这个示例代码使用了D3.js库,创建了一个简单的柱状图,数据源为一个数组。在代码中,我们使用了比例尺来自适应不同的数据和视窗大小;使用了SVG来绘制柱状图,对每个数据点绘制了一个矩形来表示数据大小。你可以将代码复制到本地文件中,用浏览器打开来查看效果。
阅读全文