d3.js (v3)折线图上的工具提示
在D3.js（版本3）中创建折线图并添加工具提示（tooltip）可以通过以下步骤实现。以下是一个简单的示例，展示了如何创建一个带有工具提示的折线图。
HTML结构
首先，创建一个基本的HTML结构，包含一个用于绘制图表的容器和一个用于显示工具提示的元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>D3.js Line Chart with Tooltip</title>
<style>
/* 基本的样式 */
.chart {
font-family: Arial, sans-serif;
}
.line {
fill: none;
stroke: steelblue;
stroke-width: 2px;
}
.tooltip {
position: absolute;
text-align: center;
width: 100px;
height: 28px;
padding: 2px;
font: 12px sans-serif;
background: lightsteelblue;
border: 0px;
border-radius: 8px;
pointer-events: none;
}
</style>
</head>
<body>
<div class="chart"></div>
<div class="tooltip" style="opacity:0;"></div>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="script.js"></script>
</body>
</html>JavaScript代码
接下来，编写JavaScript代码来创建折线图并添加工具提示功能。
// 数据
var data = [
{ date: new Date(2021, 0, 1), value: 5 },
{ date: new Date(2021, 0, 2), value: 9 },
{ date: new Date(2021, 0, 3), value: 7 },
{ date: new Date(2021, 0, 4), value: 5 },
{ date: new Date(2021, 0, 5), value: 11 },
{ date: new Date(2021, 0, 6), value: 13 },
{ date: new Date(2021, 0, 7), value: 17 }
];
// 设置图表的宽度和高度
var margin = { top: 20, right: 30, bottom: 30, left: 40 },
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
// 创建SVG容器
var svg = d3.select(".chart")
.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 + ")");
// 设置x轴和y轴的比例尺
var x = d3.time.scale()
.range([0, width]);
var y = d3.scale.linear()
.range([height, 0]);
// 设置x轴和y轴的域
x.domain(d3.extent(data, function(d) { return d.date; }));
y.domain(d3.extent(data, function(d) { return d.value; }));
// 添加x轴
svg.append("g")
.attr("transform", "translate(0," + height + ")")
.call(d3.svg.axis().scale(x).orient("bottom"));
// 添加y轴
svg.append("g")
.call(d3.svg.axis().scale(y).orient("left"));
// 创建折线生成器
var line = d3.svg.line()
.x(function(d) { return x(d.date); })
.y(function(d) { return y(d.value); });
// 添加折线
svg.append("path")
.datum(data)
.attr("class", "line")
.attr("d", line);
// 工具提示
var tooltip = d3.select(".tooltip");
// 添加鼠标事件
svg.selectAll(".dot")
.data(data)
.enter().append("circle")
.attr("class", "dot")
.attr("cx", function(d) { return x(d.date); })
.attr("cy", function(d) { return y(d.value); })
.attr("r", 5)
.on("mouseover", function(event, d) {
tooltip.transition()
.duration(200)
.style("opacity", .9);
tooltip.html("Date: " + d.date + "<br/>Value: " + d.value)
.style("left", (event.pageX + 5) + "px")
.style("top", (event.pageY - 28) + "px");
})
.on("mouseout", function(d) {
tooltip.transition()
.duration(500)
.style("opacity", 0);
});解释
- HTML结构：创建了一个包含SVG容器和工具提示元素的HTML页面。
- JavaScript代码：
- 定义数据集。
- 设置图表的宽度和高度，并创建SVG容器。
- 设置x轴和y轴的比例尺，并定义它们的域。
- 添加x轴和y轴。
- 创建折线生成器，并添加折线。
- 创建工具提示元素，并添加鼠标事件以显示和隐藏工具提示。
通过这些步骤，你可以在D3.js（版本3）中创建一个带有工具提示的折线图。
相关·内容
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
云直播活动推荐
腾讯云开发者
