如何在 D3 中创建工具提示,以便在图形中节点上的鼠标悬停上获取图像
How to create tooltip in D3 to get image on MouseOver on a node in a Graph
我有一个D3应用程序,它正在形成一个图形,上面有一些节点,这些节点显示了图形的某些年份,并且在节点上执行鼠标悬停事件时还显示一些信息。现在,我想在将鼠标悬停在图形节点上时在鼠标悬停事件上显示图像。我在 tsv 文件中进行了一些更改,但它没有效果,图像也没有出现。这是我所做的,
<!DOCTYPE html>
<meta charset="utf-8">
<style> /* set the CSS */
body { font: 12px Arial;}
path {
stroke: green;
stroke-width: 2;
fill: none;
}
.axis path,
.axis line {
fill: none;
stroke: grey;
stroke-width: 1;
shape-rendering: crispEdges;
}
div.tooltip { /* set the CSS for tooltip divs */
position: absolute; /* reference for measurement */
text-align: center; /* align the text to the center */
width: 60px; /* set the width of the rectangle */
height: 28px; /* set the height of the rectangle */
padding: 2px; /* set a border around the rectangle */
font: 12px sans-serif; /* set the font type for the tooltips */
background: lightsteelblue; /* set the colour of the rectangle */
border: 0px; /* turn off the border (0px) */
border-radius: 8px; /* set how rounded the edges of the rectangle is */
pointer-events: none; /* 'none' tells the mouse to ignore the rectangle */
}
</style>
<body>
<!-- load the d3.js library -->
<script type="text/javascript" src="d3/d3.v3.min.js"></script>
<script>
// Set the dimensions of the canvas / graph
var margin = {top: 30, right: 20, bottom: 30, left: 50},
width = 600 - margin.left - margin.right,
height = 270 - margin.top - margin.bottom;
// Parse the date / time
var parseDate = d3.time.format("%d-%b-%y").parse;
var formatTime = d3.time.format("%e %B"); // Format the date / time for tooltips
// Set the ranges
var x = d3.time.scale().range([0, width]);
var y = d3.scale.linear().range([height, 0]);
// Define the axes
var xAxis = d3.svg.axis().scale(x)
.orient("bottom").ticks(5);
var yAxis = d3.svg.axis().scale(y)
.orient("left").ticks(5);
// Define the line
var valueline = d3.svg.line()
.x(function(d) { return x(d.date); })
.y(function(d) { return y(d.close); });
// Define 'div' for tooltips
var div = d3.select("body").append("div") // declare the properties for the div used for the tooltips
.attr("class", "tooltip") // apply the 'tooltip' class
.style("opacity", 0); // set the opacity to nil
// Adds the svg canvas
var svg = d3.select("body")
.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 + ")");
// Get the data from external file
d3.tsv("data/data.tsv", function(error, data) {
data.forEach(function(d) {
d.date = parseDate(d.date);
d.close = +d.close;
});
// Scale the range of the data
x.domain(d3.extent(data, function(d) { return d.date; }));
y.domain([0, d3.max(data, function(d) { return d.close; })]);
// Add the valueline path.
svg.append("path")
.attr("class", "line")
.attr("d", valueline(data));
// draw the scatterplot
svg.selectAll("dot")
.data(data)
.enter().append("circle")
.attr("r", 5) // Made slightly larger to make recognition easier
.attr("cx", function(d) { return x(d.date); })
.attr("cy", function(d) { return y(d.close); }) // remove semicolon
// Tooltip stuff after this
.on("mouseover", function(d) { // when the mouse goes over a circle, do the following
div.transition() // declare the transition properties to bring fade-in div
.duration(200) // it shall take 200ms
.style("opacity", .9); // and go all the way to an opacity of .9
div .html(formatTime(d.date) + "<br/>" + d.close) // add the text of the tooltip as html
.style("left", (d3.event.pageX) + "px") // move it in the x direction
.style("top", (d3.event.pageY - 28) + "px"); // move it in the y direction
}) //
.on("mouseout", function(d) { // when the mouse leaves a circle, do the following
div.transition() // declare the transition properties to fade-out the div
.duration(500) // it shall take 500ms
.style("opacity", 0); // and go all the way to an opacity of nil
}); // finis
// Add the X Axis
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
// Add the Y Axis
svg.append("g")
.attr("class", "y axis")
.call(yAxis);
});
</script>
</body>
这是我有的 tsv 文件
date close
1-May-12 58.13
30-Apr-12 53.98
27-Apr-12 67.00
26-Apr-12 89.70
25-Apr-12 99.00
24-Apr-12 130.28
23-Apr-12 166.70
20-Apr-12 234.98
19-Apr-12 345.44
18-Apr-12 443.34
17-Apr-12 543.70
16-Apr-12 580.13
13-Apr-12 605.23
12-Apr-12 622.77
11-Apr-12 626.20
10-Apr-12 628.44
9-Apr-12 636.23
5-Apr-12 633.68
4-Apr-12 624.31
3-Apr-12 629.32
2-Apr-12 618.63
30-Mar-12 599.55
29-Mar-12 609.86
28-Mar-12 617.62
27-Mar-12 614.48
26-Mar-12 606.98
这是这里的 tsv 文件,我已将关闭值更改为一串图像,即在最后一列中的位置 606.98,我将添加"1.png",但它不会在图形上鼠标悬停时出现....有人请帮忙
有人请帮忙...
您必须在
每次鼠标悬停时在 html 中添加图像标记,并带有动态生成的图像路径。您可以使用div 名称等动态生成它
string yourImagePath = ""; // you will have to set the image path here
svg.selectAll("text")
.data(dataset)
.enter() //here you would add all the other d3 functions that make it sensible
.on("mouseover", function(d) { // the mouseover event
div.transition()
.duration(200)
.style("opacity", .85);
var string = "<img src= + " yourImagePath " + />";
div .html(string) //this will add the image on mouseover
.style("left", (d3.event.pageX + 10) + "px")
.style("top", (d3.event.pageY + 50) + "px")
.style("font-color", "white");
}
相关文章:
- 获取图像节点js的主色
- 调整节点js中的图像大小
- 节点 js 流星 js 图像文件上传图像损坏
- 节点:将 base64 源写入图像文件
- d3.js用图像替换节点
- Kendo TreeView-只向没有子节点的父节点添加删除图像图标
- 节点.js 使用 Multer 上传图像显示未定义
- 单击时在文本之间插入图像节点
- 如何使用javascript在文本之间插入图像节点
- 无法在 d3.js 中的节点上追加图像
- 如何在 D3 中创建工具提示,以便在图形中节点上的鼠标悬停上获取图像
- 如何使用本机节点 JS HTTP 库将图像写入缓冲区
- 从节点.js中扫描的图像中评估复选框
- 为什么我无法让我的图像出现在表格单元格/节点中.也许我可以得到一些结束
- jQuery或JS代码,用于获取网页中当前选定的表单项/文本/图像的确切节点数据
- 将图像上传到节点.js图像“未定义
- 如何在没有表单的情况下将图像上传到节点 js 服务器
- 主要图像难题 - 节点.js快速服务器
- 当只有lastChild节点应该响应点击时,是什么导致我的图像节点响应点击
- 是否有可能在javascript中测试,如果var包含一个图像节点,如果它被加载