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）中创建一个带有工具提示的折线图。
相关·内容
我正在尝试实现折线图的工具提示。图表显示correctly.On悬停在图表上，并显示错误"Cannot read property time of undefined“我使用的是d3版本3。
浏览 18提问于2017-06-25得票数 0
回答已采纳
我正在使用nivo图表，工具提示并不只出现在我的折线图上。我在这里复制并粘贴了示例：
图表显示为十字准线，但不显示任何工具提示。当我复制粘贴其他图表示例时，它们可以很好地工作，并显示一个工具提示。我不确定如何解决这个问题，因为它只发生在折线图上。
浏览 1提问于2020-12-02得票数 2
我已经使用chartjs v3创建了折线图。我使用了自定义的工具提示回调函数来显示隐藏数据集/系列上的工具提示数据，但我不知道为什么label color squar只在一个系列上显示。
浏览 49提问于2021-06-18得票数 0
我正在使用Google Maps API v3中的KMLLayer加载一个KML。是否可以引用地图上的多边形并执行诸如更改颜色或透明度之类的操作？
浏览 0提问于2011-07-23得票数 2
回答已采纳
我想在单击每个折线图上的点时显示数据值。是否可以使用charts_flutter库来显示此工具提示？
浏览 75提问于2020-07-02得票数 1
我想将D3.js地图上的两个数据集组合起来。第一数据集：.json中的空间数据。第二数据集：.csv中区域的数据
在我的函数中创建映射的新
浏览 4提问于2013-10-11得票数 6
我想添加自定义工具提示到Candlestick图表。我在折线图上修改了带有自定义工具提示的示例为： contentGenerator: function (e) { }我使用的是我将感谢任何在OHLC/Candlestick图表上自定义工具提示的帮助。
浏览 0提问于2017-10-30得票数 0
1回答
有没有办法在SciChart IOs折线图上滚动时显示的工具提示中只显示一个值？在android和WPF中有许多这样做的例子，但不是IOs。
浏览 2提问于2017-10-10得票数 1
当转到Google网站并登录时，您可以从页面顶部的工具栏菜单中单击“地图”选项。单击“我的位置”按钮，然后选择“创建地图”。您可以在此处选择追踪路径，例如，此地图：
有一些已知的方法，通过JS (也欢迎其他语言)，我可以放置一个Pin (标记)，比如说，从我追踪的路线开始的50个mts？在google中有一些路线的距离数据，但我还没有找到一个好的教程，或者任何关于如何使用这些地图做到这一点的答案。顺便说一句，我可以通过编程绘制一条路线
浏览 0提问于2012-12-07得票数 1
回答已采纳
1回答
我正在尝试使用一个垂直规则，类似于这里的https://altair-viz.github.io/gallery/multiline_tooltip.html中显示的altair多行工具提示示例。我也想使用文本工具提示，因为我的数据集包含与每个点相关的文本注释。 下面是示例代码，我在其中添加了一个带有虚拟文本的"comments“列，还向line组件添加了工具
浏览 23提问于2021-01-17得票数 2
回答已采纳
2回答
当我使用dojo工具包绘制一个简单的折线图时，我变得疯狂起来。一切都很好，除了工具提示不会在鼠标悬停时出现。ChartData是具有以下结构的对象的列表：
[{'x':x1, 'y':y1, 'tooltip':"some text"}, {...}, ...]我试着按照的建议改变主题，但仍然没有结果。我做错了什么？
浏览 1提问于2012-12-18得票数 2
回答已采纳
在grafana中创建折线图时，可以将鼠标悬停在折线图上以查看数据点的精确值。但是，如果某个特定时间的指标是null，则它将获取前一个日期的第一个指标。 ? 我在问自己:我是不是做错了什么，或者这只是grafana的工作方式。 如何才能更改此行为，以便仅在悬停工具提示中显示实际悬停日期的数据。
浏览 4提问于2021-08-12得票数 0
1回答
将鼠标悬停在折线图上时，我需要显示一个包含少量详细信息的工具提示。我可以在单元格中显示工具提示，但当工具提示显示在单元格中时，内容会隐藏在单元格中。我需要以这样的方式显示工具提示，它可以重叠，并在另一个单元格上显示工具提示。 我尝试将z索引设置为99999 &将其定位为highchart工具提示
浏览 11提问于2021-10-13得票数 0
我正在寻找一种方法，可以通过点击外部按钮来激活jquery flot折线图上的数据点。我如何做到这一点-我如何在不使用鼠标的情况下获得数据点的句柄-以及我如何激活它和激活工具提示？感谢各位专家的建议！
浏览 1提问于2012-12-16得票数 2
回答已采纳
我希望工具提示仅放置在第一个数据集上，因为它当前放置在所有数据集的平均位置上。截图如下：
我知道ChartJS具有定位器功能(如下所示)，但我不知道如何忽略其他两个数据集，因此工具提示仅粘贴在第一个折线图上
Chart.Tooltip.positioners.top = function
浏览 16提问于2019-11-06得票数 0
回答已采纳
1回答
我想将工具提示添加到图表。我指的是和示例 .style("opacity", 0); 与上面的代码一样，选择SVG上的点，但我没有任何特定的元素来绑定工具提示。有人可以在这方面帮助我，因为我是d3.js的新手。
浏览 0提问于2016-12-06得票数 1
2回答
使用GMap APi v3，我使用“指导”服务为用户生成路由，但是一旦在地图上呈现该路由，我放置的目标信息就会被裁剪，因为映射集中在路由上，而不是目标上。我如何告诉通用汽车公司：
会自动聚焦(或居中)在信息图上，而不是以不被裁剪的方式显示路径)(例如:使用信息图右上角的工具提示箭头而不是左下角的工具提示箭头，这将导致窗口出现在路由目标的右上角)
浏览 4提问于2011-12-16得票数 0
回答已采纳
1回答
快速问题-我有一个基于胜利图的折线图，当有人将鼠标悬停在数据上时，我想在上面显示一个工具提示。
这里暗示了同样的..。
浏览 0提问于2017-09-21得票数 6
当我通过options.scales.xAxes.time.tooltipFormat将鼠标悬停在折线图上的数据点上时，我可以设置工具提示的格式，但似乎不能对x轴刻度标签执行此操作。我的data.labels是一个moment对象数组。它们显示为"MMM DD, YYYY" (例如，2012年2月23日)，但我想删除年份。
浏览 1提问于2016-05-06得票数 56
我想知道是否有一种方法可以使折线图上的每个数据点都可见。默认行为是，当您将鼠标悬停在数据点上时，点只会出现在数据点上(以及工具提示)。我希望数据点在默认情况下是可见的。有没有办法让我这样做呢？
浏览 2提问于2011-07-01得票数 4
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
