在d3中线经过的不同轴上添加工具提示
在d3中，可以通过添加工具提示（tooltip）来增强数据可视化的交互性和信息展示。工具提示是一种浮动的信息框，当鼠标悬停在数据点或图表元素上时，会显示相关的附加信息。
要在d3中线经过的不同轴上添加工具提示，可以按照以下步骤进行操作：
- 导入d3库：在HTML文件中，首先需要导入d3库，可以通过以下代码实现：
<script src="https://d3js.org/d3.v7.min.js"></script>- 创建SVG容器：使用d3.select()方法选择一个容器元素，并使用d3.append()方法创建一个SVG容器，代码示例如下：
const svg = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", height);- 创建轴：根据需要创建x轴和y轴，可以使用d3.axis()方法创建轴的生成器，然后使用d3.scaleLinear()等比例尺方法定义轴的比例，代码示例如下：
const xScale = d3.scaleLinear()
.domain([0, data.length])
.range([0, width]);
const yScale = d3.scaleLinear()
.domain([0, d3.max(data)])
.range([height, 0]);
const xAxis = d3.axisBottom(xScale);
const yAxis = d3.axisLeft(yScale);
svg.append("g")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.call(yAxis);- 添加数据点：根据数据创建相应的数据点，可以使用d3.selectAll()方法选择数据点元素，并使用d3.data()方法绑定数据，代码示例如下：
svg.selectAll("circle")
.data(data)
.enter()
.append("circle")
.attr("cx", function(d, i) { return xScale(i); })
.attr("cy", function(d) { return yScale(d); })
.attr("r", 5)
.attr("fill", "steelblue");- 添加工具提示：使用d3.tip()方法创建一个工具提示生成器，并设置工具提示的内容和样式，代码示例如下：
const tooltip = d3.tip()
.attr("class", "tooltip")
.html(function(d) { return "Value: " + d; });
svg.call(tooltip);- 绑定工具提示：将工具提示绑定到数据点上，可以使用d3.on()方法监听鼠标事件，在鼠标悬停时显示工具提示，代码示例如下：
svg.selectAll("circle")
.on("mouseover", tooltip.show)
.on("mouseout", tooltip.hide);- CSS样式：为工具提示定义CSS样式，可以通过以下代码添加样式：
.tooltip {
position: absolute;
background-color: #fff;
border: 1px solid #ccc;
padding: 10px;
}以上就是在d3中线经过的不同轴上添加工具提示的步骤。通过这种方式，当鼠标悬停在数据点上时，会显示相应的工具提示框，提供更详细的信息。在实际应用中，可以根据需要自定义工具提示的内容和样式。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云云服务器（CVM）：提供弹性计算能力，满足各类业务需求。
- 腾讯云云数据库 MySQL 版：提供稳定可靠的云数据库服务，支持高性能、高可用的MySQL数据库。
- 腾讯云对象存储（COS）：提供安全可靠、低成本的云端存储服务，适用于各种场景的数据存储和处理。
- 腾讯云人工智能：提供丰富的人工智能服务，包括图像识别、语音识别、自然语言处理等，帮助开发者构建智能化应用。
- 腾讯云物联网（IoT）：提供全面的物联网解决方案，帮助用户连接、管理和控制物联网设备。
- 腾讯云移动开发：提供一站式移动应用开发服务，包括移动应用开发平台、移动测试服务等。
- 腾讯云区块链服务（BCS）：提供高性能、可扩展的区块链服务，帮助用户快速搭建和部署区块链网络。
- 腾讯云视频处理（VOD）：提供全面的视频处理服务，包括视频上传、转码、剪辑、水印等功能。
- 腾讯云音视频通信（TRTC）：提供高质量、低延迟的音视频通信服务，支持实时音视频通话和互动直播等场景。
请注意，以上链接仅为示例，具体产品和服务选择应根据实际需求进行评估和决策。
相关·内容
1回答
在D3中有“轴相等”吗？
、、、、
我正在使用D3和Python创建一些情节。使用Python，我可以做轴相等的操作，如图1所示：
我希望在使用D3的SVG中实现同样的目标。请参阅图2，轴不相等：
我所用的轴尺如下：
var xScale = d3.scaleLinear()
.range([0, width])
.domain([minX, maxX]);
var yScale = d3.scaleLinear()
.range([height, 0])
.domain([minY, maxY]);
var xAxis = d3.axisBottom(xScale).ti
浏览 2提问于2019-12-10得票数 4
回答已采纳
1回答
我的目标是使用示例数据在页面上显示条形图。我希望有一个x轴和y轴。 我遵循了一个关于如何创建D3.JS条形图的教程，在我添加x和y轴之前，它工作得很好。我原本希望条形图适合轴的内部，但实际结果是条形图在轴的外部。我在控制台中没有收到任何错误消息。 我已经尝试重新定位代码，以便在轴之前和之后创建条形图时都不会感到高兴。 var data = [80, 100, 56, 120, 180, 30, 40, 120, 160];
var svgWidth = 500,
svgHeight = 300,
barPadding = 5;
var barWidth = (svgWidth
浏览 19提问于2020-07-02得票数 1
回答已采纳
我有一张用d3js v4写成的线条图。现在，我需要为每个数据点添加工具提示。这个项目是棱角分明的，我对它非常陌生。为了添加工具提示，我在线条图上做了一个散点图，并显示了这些点。我在component.ts文件中处理过onmouseover和onmouseout事件，但没有显示工具提示。守则如下：
import {Component, ElementRef, Input, OnChanges, OnInit, ViewChild} from '@angular/core';
import {RegressionValue} from '../../models/Regre
浏览 2提问于2018-02-27得票数 1
回答已采纳
1回答
我正在使用d3制作条形图，我遇到了一个问题，rect元素中的x值似乎与width值的行为不同，y和Health值也是如此。奇怪的是，我将相同的值传递给每个对等体。
我正在测试这个问题，并得到了奇怪的结果，如下图所示。请注意，在设置范围时，yScale是反转的。我的期望是矩形的四个角应该与四个圆相接，但事实并非如此。这种行为有什么原因吗？
图片：
我的代码：
const xMax = dataset.length-1;
const yMax = d3.max(dataset, (d)=> d[1]);
const xScale = d3.scaleLinear()
浏览 0提问于2018-07-24得票数 1
1回答
未显示d3区域图
、、、
我正在尝试创建一个d3区域图，但是没有显示任何内容。我猜xScale出了点问题。我可以看到添加到DOM中的路径，但是没有d属性。我做错了什么？
// Area chart width and height
const width = 500,
height = 100;
//Define x and y scale for area chart
const xScale = d3.scaleLinear().range([0, width]);
const yScale = d3.scaleLinear().range([height, 0]);
// Add SVG to #ar
浏览 1提问于2020-10-11得票数 2
回答已采纳
1回答
我是d3的新手，您能在我的轴上查看和判断最大值没有显示吗？就像没有2015年或者Y尺度上的39.50一样，即使是d3.max也能看到它们的排列。
const xScale = d3.scaleLinear()
.domain([ d3.min(years), d3.max(years) ])
.range([paddings.paddingLeft,w - paddings.paddingRight - paddings.paddingLeft]);
const xAxis = d3.axi
浏览 1提问于2021-09-10得票数 1
回答已采纳
我是d3的新手，从Urvashi Link Here女士那里找到了这篇教程 我现在可以看到绘制的折线图，但是鼠标工具提示会导致一个未定义的错误。它是未定义的，无法找到导致这种情况的根本原因，因为数据完全是随机生成的，即使console.log()也显示为未定义。 下面是错误： TypeError: Cannot read properties of undefined (reading 'label')
SVGRectElement.mousemove
http://localhost:3000/static/js/main.chunk.js:269:54
266 |
浏览 22提问于2021-09-25得票数 0
回答已采纳
开始，x轴标签位于刻度的中间。但是，在我旋转x轴标签后，x轴标签显示了一些问题。 现在，我希望x轴标签位于刻度的中间。我该怎么做呢？如果使用transform，如何获取x轴的中点？结果看起来像是https://drive.google.com/open?id=1Fen0to5Ih86alOXu6UXeJzeicX1E1JFJ const data = [
{
'group': 'G1',
'sample': 's1',
'Actinomyces': 12.5580279499018
浏览 22提问于2019-04-02得票数 0
回答已采纳
我有一个堆叠的条形图，它在X轴上显示年份，在Y轴上显示总数，矩形部分按项目类型着色。我的数据数组示例如下所示： Item, Tonnes, Year
Wheat, 38913, 2020
Sugar, 23463, 2020
Rice, 23524, 2020
Wheat, 38913, 2019
Sugar, 23463, 2019
Rice, 23524, 2019 D3使用的格式化数据如下所示： 0: {year: 1995, Animal and Vegetable Oil: 38913, total: 3168499, Bananas: 25259, Beverages: 6958
浏览 23提问于2020-10-05得票数 0
我正试着制作一个条形图，从中提取一些数据
这个项目是FCC d3项目的一部分。
我试图在每个条形上创建一个div工具提示。
但是，我似乎不能得到'x‘属性。当我将一个酒吧悬停时，它在控制台中这样说：
TypeError: r.getAttribute is not a function
at _t.yl [as attr] (d3.v4.min.js:4)
at SVGRectElement.svg.selectAll.data.enter.append.attr.attr.attr.attr.attr.on.d (barchart.js:70)
at SVGR
浏览 0提问于2017-06-23得票数 4
回答已采纳
我注意到在从d3版本4更新到版本5时，行为发生了变化。在v4中，当数据集包含y-轴的所有零值时，"0“勾号将正确地对齐到图表的底部。
<head>
<!-- load the d3.js library -->
<script src="https://d3js.org/d3.v4.min.js"></script>
<style>
.line {
fill: none;
stroke: steelblue;
stroke-width: 2px;
浏览 0提问于2019-06-18得票数 3
回答已采纳
在过去的两天里，我一直在浏览堆叠溢出和在线例子，找出为什么我的图表显示得不正确。
我确信，在代码的缩放部分，我遗漏了一些东西。如果我把图上x轴底部的黑暗部分复制到记事本上，它就会给我所有的x轴元素。
谁能给我指明正确的方向？
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.8.0/d3.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded
浏览 0提问于2019-02-05得票数 0
回答已采纳
我有以下d3代码：
var json = [
{
date: "05/17",
numTags: 23
}
];
d3.select('summary-graph').selectAll('*').remove();
var svg = d3.select("summary-graph
浏览 3提问于2017-07-03得票数 4
回答已采纳
我正在创建一个条形图，当我在每个条形图上盘旋时，我需要显示一个工具提示。工具提示必须包含带有条形条日期信息的数据属性。使用.attr(“数据日期”，d => d)，我将该属性添加到条形图中，但在工具提示中使用时它显示了一个错误。(如果删除第53行，工具提示就能正常工作)。
const w = 1000;
const h = 550;
const padding = 50;
const barPadding = 0.5;
d3.json(
"https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/
浏览 1提问于2019-01-26得票数 1
回答已采纳
1回答
我面临的问题是，由于版本不匹配，我无法在代码中编写下面的函数。代码是
var zoom = d3.behavior.zoom()
.x(x)
.y(y)
.scaleExtent([1, 10])
.on("zoom", zoomed);
我试过这样做
const zoom = d3.zoom()
.scaleExtent([1, 4])
.x(this.xScale)
.on('zoom', () => {})
但这对我不起作用。
如何在d3版本5中编写相同的函数？我想使用d3版本5使以y轴为固定位置的线图在x轴上滚动。
这是我的实现基本
浏览 2提问于2019-03-27得票数 10
回答已采纳
1回答
我正在处理一个相当简单的条形图，并希望添加一个工具提示，这样当用户在每个单独的条形图上盘旋时，他们就可以看到技术的确切大小(y轴上的值)。在网上做了很多研究之后，我仍然无法让它开始工作。我现在使用的是d3技巧()，它提供了一些教程，这些教程似乎可以使这个过程变得更简单，但仍然不太顺利。如能在此问题上提供任何帮助，将不胜感激。我在下面附上了我的.js和.html文件。谢谢!
Javascript
import * as d3 from "d3";
import d3Tip from "d3-tip";
d3.tip = d3Tip;
// DATA //
le
浏览 5提问于2022-09-08得票数 0
回答已采纳
我有d3工具提示
var tip = d3.tip()
.attr('class', 'd3-tip')
.offset([-10, 0])
.html(function(d) {
return '<strong>Value:</strong> <span class="d3-tip-value>' + d.value + '</span>';
});
svg.call(tip);
所以我在函数(a，b，b)中有更多的代码，当鼠标移到路径上的点上时，还有tip.show方
浏览 0提问于2019-03-18得票数 0
我在试着显示一个分组条形图。
两个问题：
Y轴只显示到90，我希望它一直显示到100。
Y轴在x轴以下，而且x轴的位置不正确。
SVG的宽度、高度有边距，而图表显示区域没有边距。
在yScale中，height应该表示没有边距的图表区域。
所以，把y轴从height，即图的面积高度，我已经预计y轴开始从x轴线水平向上。但这不会发生的。
var data = [
{
model_name: "model_1",
field1: 19,
field2: 83,
浏览 0提问于2020-04-15得票数 2
在t D3.jsVersion6.7条形图中，我试图对齐x轴以显示类别，并显示y轴从0开始。扩展svg的高度和更改转换似乎不起作用。如何使x轴类别出现在条形图下，并使y轴从0开始？谢谢。
async function barChart() {
const dataset = await d3.csv("https://assets.codepen.io/417105/bodypart-injury-clean.csv");
console.log(dataset);
const width = 400;
const height = 400;
浏览 0提问于2021-05-29得票数 1
回答已采纳
1回答
我有x轴，有10条线。我想为每一个滴答画一条网格线。我的尝试是在这里：
const dataSet = [
0,
10,
20,
30,
40,
50,
60,
70,
80,
90,
100
];
const w = 1200;
const h = 250;
const padding = 20;
const paddingYaxis = 50;
const xScale = d3.scaleLinear()
.domain([0,100])
.range([paddingYaxis,
浏览 0提问于2018-08-26得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
