前端d3库 写个demo
时间: 2023-07-07 20:36:55 浏览: 137
好的,我可以为您提供一个基于d3.js库的简单demo。这个demo将创建一个简单的柱状图,用于展示不同城市的人口数量。
首先,您需要在HTML文件中引入d3.js库。您可以从官方网站(https://d3js.org/)上下载最新版本的d3.js文件,然后将其保存在您的项目文件夹中。在HTML文件中,您可以使用以下代码来引入d3.js文件:
```
<script src="path/to/d3.js"></script>
```
接下来,您可以使用以下代码来创建一个容器元素,用于容纳柱状图:
```
<div id="chart"></div>
```
然后,您可以使用以下JavaScript代码来生成柱状图:
```
// 定义数据
var data = [
{city: "北京", population: 2154},
{city: "上海", population: 2424},
{city: "广州", population: 1478},
{city: "深圳", population: 1303},
{city: "成都", population: 1630}
];
// 定义画布大小
var width = 600;
var height = 400;
// 定义柱状图的x轴比例尺
var x = d3.scaleBand()
.domain(data.map(function(d) { return d.city; }))
.range([0, width])
.padding(0.1);
// 定义柱状图的y轴比例尺
var y = d3.scaleLinear()
.domain([0, d3.max(data, function(d) { return d.population; })])
.range([height, 0]);
// 创建SVG元素
var svg = d3.select("#chart")
.append("svg")
.attr("width", width)
.attr("height", height);
// 添加柱子
svg.selectAll("rect")
.data(data)
.enter()
.append("rect")
.attr("x", function(d) { return x(d.city); })
.attr("y", function(d) { return y(d.population); })
.attr("width", x.bandwidth())
.attr("height", function(d) { return height - y(d.population); });
// 添加x轴
svg.append("g")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x));
// 添加y轴
svg.append("g")
.call(d3.axisLeft(y));
```
以上代码将生成一个简单的柱状图,展示了不同城市的人口数量。您可以根据自己的需求修改数据和样式,以适应您的项目。
阅读全文