利用d3.v7使用let的方式使用Entity,Code,Year,Value格式的csv文件以年为分组分别给出value为0和value不为0的国家数量的折线图并给出具体代码并将代码分别放在.html和.js文件中
时间: 2024-03-10 17:51:23 浏览: 24
好的,下面是你需要的代码,首先是HTML文件:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>折线图</title>
<script src="https://d3js.org/d3.v7.min.js"></script>
</head>
<body>
<div id="chart"></div>
<script src="main.js"></script>
</body>
</html>
```
然后是JS文件:
```js
// 设置画布大小
const width = 800;
const height = 500;
// 设置边距
const margin = {
top: 50,
bottom: 50,
left: 50,
right: 50
};
// 计算实际画布大小
const innerWidth = width - margin.left - margin.right;
const innerHeight = height - margin.top - margin.bottom;
// 创建svg画布
const svg = d3.select('#chart')
.append('svg')
.attr('width', width)
.attr('height', height);
// 创建内部画布
const inner = svg.append('g')
.attr('transform', `translate(${margin.left}, ${margin.top})`);
// 加载csv数据
d3.csv('data.csv', d3.autoType).then(data => {
// 按年份分组
const groupedData = d3.group(data, d => d.Year);
// 计算value为0和不为0的国家数量
const zeroValues = [];
const nonZeroValues = [];
for (const [year, group] of groupedData) {
const zeroCount = group.filter(d => d.Value === 0).length;
const nonZeroCount = group.length - zeroCount;
zeroValues.push({ year, count: zeroCount });
nonZeroValues.push({ year, count: nonZeroCount });
}
// 创建比例尺
const xScale = d3.scaleBand()
.domain(groupedData.keys())
.range([0, innerWidth])
.padding(0.1);
const yScale = d3.scaleLinear()
.domain([0, d3.max(data, d => d.Value)])
.range([innerHeight, 0]);
// 创建坐标轴
const xAxis = d3.axisBottom(xScale);
const yAxis = d3.axisLeft(yScale);
// 绘制坐标轴
inner.append('g')
.attr('transform', `translate(0, ${innerHeight})`)
.call(xAxis);
inner.append('g')
.call(yAxis);
// 绘制折线图
const zeroLine = d3.line()
.x(d => xScale(d.year))
.y(d => yScale(d.count));
inner.append('path')
.datum(zeroValues)
.attr('d', zeroLine)
.attr('fill', 'none')
.attr('stroke', 'blue')
.attr('stroke-width', 2);
const nonZeroLine = d3.line()
.x(d => xScale(d.year))
.y(d => yScale(d.count));
inner.append('path')
.datum(nonZeroValues)
.attr('d', nonZeroLine)
.attr('fill', 'none')
.attr('stroke', 'red')
.attr('stroke-width', 2);
});
```
注意到在JS文件里,我们使用了d3.csv函数来加载数据,函数的第一个参数是要加载的CSV文件的路径,第二个参数是一个回调函数,用来处理加载的数据。在回调函数里,我们首先按照年份分组,然后计算value为0和不为0的国家数量。接着,我们创建了比例尺和坐标轴,并使用d3.line函数绘制了折线图。最后,我们将折线图绘制在内部画布上。
请确保将CSV文件命名为"data.csv"并与.html和.js文件放在同一个目录下。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)