Javascript 向使用svg路径生成的条形图添加工具提示
如何向使用svg路径生成的条形图中的每个条形添加工具提示。。。是否可以使用引导工具提示。。。? 我在下面提供了我的svg路径Javascript 向使用svg路径生成的条形图添加工具提示,javascript,svg,d3.js,crossfilter,Javascript,Svg,D3.js,Crossfilter,如何向使用svg路径生成的条形图中的每个条形添加工具提示。。。是否可以使用引导工具提示。。。? 我在下面提供了我的svg路径 <path class="foreground bar" clip-path="url(#clip 0)" d="M36,100V68h20V100M108,100V29h20V100M180,100V71h20V100M252,100V-4h20V100M324,100V87h20V100"/> 我已经在下面的fiddle中提供了svg生成的条形图。
<path class="foreground bar" clip-path="url(#clip 0)" d="M36,100V68h20V100M108,100V29h20V100M180,100V71h20V100M252,100V-4h20V100M324,100V87h20V100"/>
我已经在下面的fiddle中提供了svg生成的条形图。。。
如何向每个栏添加工具提示
如果您有任何建议,我们将不胜感激。不确定您所说的引导是什么意思,但大多数UAs都会将标题元素子元素转换为工具提示。例如
<path class="foreground bar" clip-path="url(#clip 0)" d="M36,100V68h20V100M108,100V29h20V100M180,100V71h20V100M252,100V-4h20V100M324,100V87h20V100">
<title>tooltip text</title>
</path>
工具提示文本
看看:
注意,在JSFIDLE中,您实际上并没有使用d3。但您可以轻松添加它以获得工具提示,请参见:
要找出哪个条,您必须查看鼠标的x位置。你应该考虑使用A(它将在两个方向映射-检查反函数)。
var svg = d3.select("svg").attr("width", 400).attr("height", 400);
var vis = svg.append('g');
var txt = vis.append('text')
.attr({ transform: 'translate(5,20)', fill:'red'})
.text("Node Info");
d3.selectAll('.bar')
.on("mouseover", function(d) {
var mousePos = d3.mouse(this);
txt.text(mousePos);
txt.attr({transform: 'translate(' + mousePos + ')'});
})
.on("mousemove", function(d) {
var mousePos = d3.mouse(this);
txt.attr({transform: 'translate(' + mousePos + ')'});
});