d3读取数据并制作饼图
时间: 2024-03-05 08:54:08 浏览: 69
好的,以下是使用 D3.js(版本 5)制作饼图的步骤:
1. 引入 D3 库
```html
<script src="https://d3js.org/d3.v5.min.js"></script>
```
2. 准备容器
```html
<div id="chart" style="width: 600px; height: 400px;"></div>
```
3. 准备数据
假设已经有了一个对象数组,每个对象包含两个属性:`sex` 表示性别(取值为 `'男'` 或 `'女'`),`count` 表示数量。
```javascript
var data = [
{sex: '男', count: 60},
{sex: '女', count: 40}
];
```
4. 创建 SVG 元素
```javascript
var svg = d3.select('#chart')
.append('svg')
.attr('width', 600)
.attr('height', 400);
```
5. 创建饼图布局
```javascript
var pie = d3.pie()
.value(function(d) { return d.count; });
```
6. 创建弧形生成器
```javascript
var arc = d3.arc()
.outerRadius(150)
.innerRadius(0);
```
7. 创建颜色比例尺
```javascript
var color = d3.scaleOrdinal()
.domain(data.map(function(d) { return d.sex; }))
.range(['#1f77b4', '#ff7f0e']);
```
8. 绘制饼图
```javascript
var g = svg.append('g')
.attr('transform', 'translate(300,200)');
var arcs = g.selectAll('.arc')
.data(pie(data))
.enter()
.append('g')
.attr('class', 'arc');
arcs.append('path')
.attr('d', arc)
.attr('fill', function(d) { return color(d.data.sex); });
arcs.append('text')
.attr('transform', function(d) { return 'translate(' + arc.centroid(d) + ')'; })
.attr('text-anchor', 'middle')
.text(function(d) { return d.data.sex; });
```
以上是一个简单的饼图制作的例子,你可以根据自己的需求进行更改。请注意,如果数据来源不同,需要相应地修改数据和布局选项。