- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我是 d3 的新手,我一直在学习 www.d3-graph-gallery.com 的教程.这些教程对我来说效果很好,但是,当涉及到将鼠标悬停在数据上时显示工具提示时,事情就很奇怪了。 This tutorial展示了如何在热图上执行此操作。如您所见,它将工具提示创建为 div
,然后将鼠标监听器添加到数据,使工具提示 div
出现在正确的位置。这在 d3-graph-gallery 网站上运行良好。
不幸的是,它既不能在我的本地浏览器上运行,也不能在 Jsfiddle 上运行: https://jsfiddle.net/vcfhnu4q/
<!DOCTYPE html>
<meta charset="utf-8">
<!-- Load d3.js -->
<script src="https://d3js.org/d3.v6.js"></script>
<!-- Create a div where the graph will take place -->
<div id="my_dataviz"></div>
<script>
// set the dimensions and margins of the graph
const margin = {top: 30, right: 30, bottom: 30, left: 30},
width = 450 - margin.left - margin.right,
height = 450 - margin.top - margin.bottom;
// append the svg object to the body of the page
const svg = d3.select("#my_dataviz")
.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})`);
// Labels of row and columns
const myGroups = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J"]
const myVars = ["v1", "v2", "v3", "v4", "v5", "v6", "v7", "v8", "v9", "v10"]
// Build X scales and axis:
const x = d3.scaleBand()
.range([ 0, width ])
.domain(myGroups)
.padding(0.01);
svg.append("g")
.attr("transform", `translate(0, ${height})`)
.call(d3.axisBottom(x))
// Build X scales and axis:
const y = d3.scaleBand()
.range([ height, 0 ])
.domain(myVars)
.padding(0.01);
svg.append("g")
.call(d3.axisLeft(y));
// Build color scale
const myColor = d3.scaleLinear()
.range(["white", "#69b3a2"])
.domain([1,100])
//Read the data
d3.csv("https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/heatmap_data.csv").then( function(data) {
// create a tooltip
const tooltip = d3.select("#my_dataviz")
.append("div")
.style("opacity", 0)
.attr("class", "tooltip")
.style("background-color", "white")
.style("border", "solid")
.style("border-width", "2px")
.style("border-radius", "5px")
.style("padding", "5px")
// Three function that change the tooltip when user hover / move / leave a cell
const mouseover = function(event,d) {
tooltip.style("opacity", 1)
}
const mousemove = function(event,d) {
tooltip
.html("The exact value of<br>this cell is: " + d.value)
.style("left", (event.x)/2 + "px")
.style("top", (event.y)/2 + "px")
}
const mouseleave = function(d) {
tooltip.style("opacity", 0)
}
// add the squares
svg.selectAll()
.data(data, function(d) {return d.group+':'+d.variable;})
.enter()
.append("rect")
.attr("x", function(d) { return x(d.group) })
.attr("y", function(d) { return y(d.variable) })
.attr("width", x.bandwidth() )
.attr("height", y.bandwidth() )
.style("fill", function(d) { return myColor(d.value)} )
.on("mouseover", mouseover)
.on("mousemove", mousemove)
.on("mouseleave", mouseleave)
})
</script>
如果您查看 jsfiddle,您会看到工具提示位于页面底部,而不是鼠标悬停在单元格上时鼠标旁边,这对我来说很有意义,怎么可能绘制div
在 svg
之上?它们不是单独的容器吗?
如何让它发挥作用?
最佳答案
您的工具提示需要具有 position
样式。试试这个:
// create a tooltip
const tooltip = d3.select("#my_dataviz")
.append("div")
.style("opacity", 0)
.attr("class", "tooltip")
.style("background-color", "white")
.style("border", "solid")
.style("border-width", "2px")
.style("border-radius", "5px")
.style("padding", "5px")
.style("position", "absolute")
<!DOCTYPE html>
<meta charset="utf-8">
<!-- Load d3.js -->
<script src="https://d3js.org/d3.v6.js"></script>
<!-- Create a div where the graph will take place -->
<div id="my_dataviz"></div>
<script>
// set the dimensions and margins of the graph
const margin = {top: 30, right: 30, bottom: 30, left: 30},
width = 450 - margin.left - margin.right,
height = 450 - margin.top - margin.bottom;
// append the svg object to the body of the page
const svg = d3.select("#my_dataviz")
.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})`);
// Labels of row and columns
const myGroups = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J"]
const myVars = ["v1", "v2", "v3", "v4", "v5", "v6", "v7", "v8", "v9", "v10"]
// Build X scales and axis:
const x = d3.scaleBand()
.range([ 0, width ])
.domain(myGroups)
.padding(0.01);
svg.append("g")
.attr("transform", `translate(0, ${height})`)
.call(d3.axisBottom(x))
// Build X scales and axis:
const y = d3.scaleBand()
.range([ height, 0 ])
.domain(myVars)
.padding(0.01);
svg.append("g")
.call(d3.axisLeft(y));
// Build color scale
const myColor = d3.scaleLinear()
.range(["white", "#69b3a2"])
.domain([1,100])
//Read the data
d3.csv("https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/heatmap_data.csv").then( function(data) {
// create a tooltip
const tooltip = d3.select("#my_dataviz")
.append("div")
.style("opacity", 0)
.attr("class", "tooltip")
.style("background-color", "white")
.style("border", "solid")
.style("border-width", "2px")
.style("border-radius", "5px")
.style("padding", "5px")
.style("position", "absolute")
// Three function that change the tooltip when user hover / move / leave a cell
const mouseover = function(event,d) {
tooltip.style("opacity", 1)
}
const mousemove = function(event,d) {
tooltip
.html("The exact value of<br>this cell is: " + d.value)
.style("left", (event.x)/2 + "px")
.style("top", (event.y)/2 + "px")
}
const mouseleave = function(d) {
tooltip.style("opacity", 0)
}
// add the squares
svg.selectAll()
.data(data, function(d) {return d.group+':'+d.variable;})
.enter()
.append("rect")
.attr("x", function(d) { return x(d.group) })
.attr("y", function(d) { return y(d.variable) })
.attr("width", x.bandwidth() )
.attr("height", y.bandwidth() )
.style("fill", function(d) { return myColor(d.value)} )
.on("mouseover", mouseover)
.on("mousemove", mousemove)
.on("mouseleave", mouseleave)
})
</script>
编辑: future 的建议 - 使用 Firefox Developer Edition。它有非常好的 CSS 样式检查工具,例如:
关于javascript - d3 : Tooltip placed on bottom of page instead of next to data,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/72165273/
在通过自动完成输入框查找地址时,我试图从城市或地区获取 Place-id。问题是,当我查找任何地址时,我可以获得城市名称和其他一些详细信息(JSON 格式),但是...... 有没有办法直接从第一个查
我将 Place Picker 添加到我的 android 应用程序中。当您知道要选择的地点的地址并填写研究栏时,它就会起作用。但是我希望用户可以在使用红色选择器时选择他选择的位置,而这部分不起作用。
我已将 Jetpack Compose 从 1.1.0-beta03 升级到 1.1.0-beta04,除了需要做一些更改外什么也没发生,但现在我在“DetailScreen”上启动应用程序时出现此错
$(function () { var input = do
我正在使用Google的Place API自动填充用户键入的城市名称(网页)。加载了API,并使用语言(pt-BR)作为参数,并且使用葡萄牙语正确填充了文本框,但是执行方法getPlace()时,它将
如何将Google Place API评论从5增加到所有评论?目前,我只获得google plus商业页面的5条评论,我想获取所有评论! 有人可以帮忙吗? 最佳答案 您可以联系Google:https
https://google-developers.appspot.com/maps/documentation/javascript/examples/places-autocomplete 我有一
你们中的许多人都曾在 android 中开发过 LBS 应用程序,并且还使用了 Google Places API Web 服务来获取各个地方的信息。而且您可能还注意到,印度的数据并不准确,这意味着您
我有一个应用程序,它使用地点 API 来帮助查找目的地附近的地点(如伦敦)。我更喜欢在附近使用,因为它可以让我专注于一个区域,而且与文本搜索相比,它也更便宜。 不幸的是,我得到的答案没有多大意义。例如
关闭。这个问题是not about programming or software development .它目前不接受答案。 这个问题似乎不是关于 a specific programming
我正在尝试使用 Google Places api 来搜索位置。但不幸的是,我只收到一条响应请求被拒绝的消息。我创建了新的 API key ,但 API 访问菜单显示了一些警告图标,如下图所示,它是否
Google Place API 未获取特定地址的单位编号。 Example: 3/12 Selwyn Avenue Elwood, 3184, Mel, VIC 但有些地址它正在正确获取单元号。 E
Closed. This question does not meet Stack Overflow guidelines。它当前不接受答案。 想要改善这个问题吗?更新问题,以便将其作为on-topi
我正在为运输行业的客户构建一个网站,我正在使用 Google Places API 获取上车地点和目的地。如果接机地点是机场,则一项要求是显示“航类号”字段。 为了确定机场是否从 Google Map
我正在研究以下内容是否可行,如果可以的话,我将如何实现这一目标。 我们会从客户那里收集企业的评论,并希望将这些评论发布到他们的评论中,并将其发布到Google商家信息中。 我想知道如何使我们的网站将这
我们开发了一个用于构建旅行路线的平台。 行程计划(行程)是由用户定义的流程排序的地点组合而成的。 我们想使用Google Places API搜索地点。我们想存储一个place_id,并用它来获取行程
截至今天(2016年5月25日),Google Places API中似乎不再有user_ratings_total的数据。我用它来获得一家企业的评论总数。是否有另一种方法来获取此数据? 最佳答案 我
有没有办法让 Google Places Autocomplete 仅限于一个国家(如法国)? 我有这个:components=country:fr https://maps.googleapis.c
我正在设置一个自定义自动填充字段,在其中显示Google地方信息中的位置以及数据库中与搜索查询匹配的事件。因此,我使用Google地方信息自动填充服务来获取查询预测,而不是将地方信息自动填充功能直接插
自2014年6月24日起,Google已将reference和id字段标记为已弃用,并将其替换为一个place_id。 到目前为止,我只看到place_id的长度恰好是27个字符,但是想知道是否有任何
我是一名优秀的程序员,十分优秀!