[英]Tooltip for Line Chart with Clip Path in D3
I have put together a D3 line chart and added threshold encoding using clip path / clipping. 我整理了一个D3折线图,并使用剪辑路径/剪辑添加了阈值编码。 The only problem I am facing is I am not able to add tooltips to this chart. 我面临的唯一问题是我无法在此图表中添加工具提示。 I want a tooltip when I hover anywhere in the chart and the corresponding y axis value on the chart shows up in the tooltip. 当我将鼠标悬停在图表中的任何位置并且图表上相应的y轴值显示在工具提示中时,我需要工具提示。
I have added threshold encoding using this example by Mike Bostock . 我使用Mike Bostock的此示例添加了阈值编码。
var line = d3.svg.line()
.interpolate("basis")
.x(function(d) { return _config.xScale(d.vtc); })
.y(function(d) { return _config.yScale(d.values); });
svg.append("clipPath")
.attr("id", "clip-above")
.append("rect")
.attr("width", _config.width)
.attr("height", _config.yScale(55));
svg.append("clipPath")
.attr("id", "clip-below")
.append("rect")
.attr("y", _config.yScale(55))
.attr("width", _config.width)
.attr("height", _config.height - _config.yScale(55));
svg.selectAll(".line")
.data(["above", "below"])
.enter().append("path")
.attr("class", function(d) { return "line " + d; })
.attr("clip-path", function(d) { return "url(#clip-" + d + ")"; })
.datum(data)
.attr("d", line);
I didn't know how to go about adding a tooltip for this particular chart as there is clip rectangle over the path and the path is broken down into above and below segment to give the colour effects. 我不知道如何为该特定图表添加工具提示,因为路径上方有剪辑矩形,并且该路径被细分为上下分段以提供色彩效果。
Do we have a unified way to add a tooltip to normal path and this one? 我们是否有统一的方法将工具提示添加到正常路径,而这一方法呢? If yes I would like to know some sources/links I can look at. 如果是,我想了解一些我可以查看的资源/链接。
Something like this , but not that complicated (without any indicator on the line, just the tooltip) 像这样的东西,但并不复杂(没有任何指示符,只是工具提示)
You can add mouseOver handler for the line and translate back the mouse y position to yAxis value using the .invert function of d3 linear scale. 您可以为该行添加mouseOver处理程序,并使用d3线性比例的.invert函数将鼠标的y位置转换回yAxis值。 Now, you can dynamically add a tooltip text element and set the position, value to it 现在,您可以动态添加工具提示文本元素并为其设置位置,值
Here is the updated Codepen link 这是更新的Codepen链接
NOTE: You still need to increase the capture area of the line. 注意:您仍然需要增加该行的捕获区域。 This can be done by adding a transparent stroke to the line. 这可以通过向线条添加透明笔触来完成。
svg.selectAll(".line")
.data(["above", "below"])
.enter().append("path")
.attr("class", function(d) { return "line " + d; })
.attr("clip-path", function(d) { return "url(#clip-" + d + ")"; })
.datum(data)
.attr("d", line)
.on("mouseover", function() {
var mousePos = d3.mouse(this);
var yAxisValue = _config.yScale.invert(mousePos[1]);
svg.selectAll(".tooltip").data([mousePos])
.enter().append("text")
.classed("tooltip", true)
.attr("x", function(d) { return d[0]})
.attr("y", function(d) { return d[1]})
.text(yAxisValue);
})
.on("mouseout", function() {
svg.selectAll(".tooltip").data([]).exit().remove();
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.