要使用
d3读取csv数据并
绘制交互
散点图，可以按照以下步骤进行操作：
1. 在HTML中添加一个SVG元素，用于
绘制散点图：
```
<div id="scatterplot"></div>
<script>
var svg =
d3.select("#scatterplot")
.append("svg")
.attr("width", width)
.attr("height", height);
</script>
```
2. 使用
d3.csv()方法读取csv数据：
```
d3.csv("data.csv", function(data) {
// 处理读取到的数据
});
```
3. 对读取到的数据进行处理，把需要
绘制的数据提取出来：
```
d3.csv("data.csv", function(data) {
var scatterData = data.map(function(d) {
return {
x: +d.x, // 把字符串类型转为数字类型
y: +d.y,
label: d.label
};
});
});
```
4. 根据数据
绘制散点图：
```
d3.csv("data.csv", function(data) {
var scatterData = data.map(function(d) {
return {
x: +d.x,
y: +d.y,
label: d.label
};
});
svg.selectAll(".dot")
.data(scatterData)
.enter().append("circle")
.attr("class", "dot")
.attr("cx", function(d) { return xScale(d.x); })
.attr("cy", function(d) { return yScale(d.y); })
.attr("r", 5)
.style("fill", function(d) { return colorScale(d.label); });
});
```
其中，xScale和yScale是
d3.scaleLinear()生成的线性比例尺，用于把数据映射到画布上的坐标系；colorScale是
d3.scaleOrdinal()生成的序数比例尺，用于把标签映射到颜色上。
5. 添加交互功能，比如鼠标悬停时显示数据标签：
```
svg.selectAll(".dot")
.on("mouseover", function(d) {
tooltip.text(d.label)
.style("visibility", "visible");
})
.on("mousemove", function(d) {
tooltip.style("top", (
d3.event.pageY - 10) + "px")
.style("left", (
d3.event.pageX + 10) + "px");
})
.on("mouseout", function(d) {
tooltip.style("visibility", "hidden");
});
var tooltip =
d3.select("#scatterplot")
.append("div")
.attr("class", "tooltip")
.style("visibility", "hidden");
```
可以根据需要添加其他交互功能，比如鼠标点击跳转到其他页面等。
完整的代码示例：
```
<!DOCTYPE html>
<html>
<head>
<title>Interactive Scatterplot</title>
<meta charset="utf-8">
<style>
.dot {
stroke: #fff;
stroke-width: 1.5px;
}
.tooltip {
position: absolute;
background-color: #fff;
border: 1px solid #000;
padding: 5px;
font-size: 12px;
}
</style>
</head>
<body>
<div id="scatterplot"></div>
<script src="https://
d3js.org/
d3.v5.min.js"></script>
<script>
var margin = {top: 20, right: 20, bottom: 30, left: 40},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var xScale =
d3.scaleLinear()
.range([0, width]);
var yScale =
d3.scaleLinear()
.range([height, 0]);
var colorScale =
d3.scaleOrdinal(
d3.schemeCategory10);
var svg =
d3.select("#scatterplot")
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
d3.csv("data.csv", function(data) {
var scatterData = data.map(function(d) {
return {
x: +d.x,
y: +d.y,
label: d.label
};
});
xScale.domain(
d3.extent(scatterData, function(d) { return d.x; })).nice();
yScale.domain(
d3.extent(scatterData, function(d) { return d.y; })).nice();
svg.selectAll(".dot")
.data(scatterData)
.enter().append("circle")
.attr("class", "dot")
.attr("cx", function(d) { return xScale(d.x); })
.attr("cy", function(d) { return yScale(d.y); })
.attr("r", 5)
.style("fill", function(d) { return colorScale(d.label); })
.on("mouseover", function(d) {
tooltip.text(d.label)
.style("visibility", "visible");
})
.on("mousemove", function(d) {
tooltip.style("top", (
d3.event.pageY - 10) + "px")
.style("left", (
d3.event.pageX + 10) + "px");
})
.on("mouseout", function(d) {
tooltip.style("visibility", "hidden");
});
});
var tooltip =
d3.select("#scatterplot")
.append("div")
.attr("class", "tooltip")
.style("visibility", "hidden");
</script>
</body>
</html>
```
其中，data.csv是示例数据文件，格式如下：
```
x,y,label
1,2,A
3,4,B
5,6,A
7,8,B
9,10,A
```
可以根据需要修改数据文件的格式和内容。
最低0.47元/天 解锁文章
2825
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
