工具提示d3js区域图中的roi值
工具提示d3js区域图中的roi值
提问于 2015-12-23 23:10:24
我有基于d3js的区域图@ http://plnkr.co/edit/4EEe7EyGRRUH4lJXpHhr?p=preview &这里是http://jsfiddle.net/g30zhvy8/，前者使用数据，后者使用数据，两者都有显示工具提示的工作代码。
svg.append("path")
.datum(data)
.attr("class", "area")
.attr("d", area);首先，工具提示的zindex似乎比图表的少，其次，如何显示与给定值最接近的值，或者在工具提示中显示区域图中特定点的内插值。在几个地方也提出了类似的问题。
此工具提示代码适用于剩余的d3js调味图表，如条形图、饼图、甜甜圈图、行图等。
回答 1
Stack Overflow用户
回答已采纳
发布于 2015-12-24 01:00:11
工具提示具有较少的z索引:这是因为您首先创建工具提示，然后创建路径，因此路径将位于工具提示前面。在svg中没有z-索引的概念。因此，我们需要先创建路径，然后再编写工具提示。
要获得鼠标悬停的工具提示，请执行以下操作(下面的代码段中有注释)：
svg.append("path")
.data([data]) //this is equivalent to datum(data)
.attr("class", "area")
.attr("d", area)
.on("mouseover", function() {
tooltip.style("display", null);
})
.on("mouseout", function() {
tooltip.style("display", "none");
})
.on("mousemove", function(d) {
var xPosition = d3.mouse(this)[0] - 15;//x position of tooltip
var yPosition = d3.mouse(this)[1] - 25;//y position of tooltip
tooltip.attr("transform", "translate(" + xPosition + "," + yPosition + ")");//placing the tooltip
var x0 = x.invert(d3.mouse(this)[0]);//this will give the x for the mouse position on x
var y0 = y.invert(d3.mouse(this)[1]);//this will give the y for the mouse position on y
tooltip.select("text").text(d3.time.format('%Y-%m-%d')(x0)+ " " +Math.round(y0));//show the text after formatting the date
});;工作代码这里
希望这能有所帮助！
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/34445102
复制相关文章
相似问题
腾讯云开发者
