使用d3-tip.js在悬停上显示工具提示 [英] Show tooltip on hover using d3-tip.js
问题描述
我想展示有关悬停现有svg元素的工具提示.
I would like to show tooltip on hovering existing svg elements.
在实时示例中，绑定数据时会创建要悬停的元素.在我的情况下，这些元素已经存在于DOM中(圆圈).所以我需要在selectedElms.enter()
In the live example the elements to hover are created when binding data. In my case these elements exists already in DOM (circles). so I need to select them right after selectedElms.enter()
我的问题是如何在圆上应用tip.show和tip.hide?
My question is how can I apply tip.show and tip.hide on circles ?
var data = [{
train: 1
}, {
train: 2
}, {
train: 3
}, {
train: 4
}]
var svg = d3.select('svg')
var tip = d3.tip()
.attr('class', 'd3-tip')
.offset([-10, 0])
.html(function(d) {
return "<strong>Frequency:</strong> <span style='color:red'>" + d.train + "</span>";
})
svg.call(tip);
let selectedElms = d3.selectAll('circle').data(data, function(d) {
if (d != undefined) {
return d.train
}
})
console.log('hi')
selectedElms.enter().on('mouseover', tip.show).on('mouseout', tip.hide)
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
<!DOCTYPE html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js"
></script>
<script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>
<svg height="400" width="500">
<circle data='1' cx="100" cy="110" r="40" stroke="black" stroke-width="3" fill="red" id="1" />
<circle data='2' cx="200" cy="110" r="40" stroke="black" stroke-width="3" fill="red" id="2" />
<circle data='3' cx="300" cy="110" r="40" stroke="black" stroke-width="3" fill="red" id="3" />
<circle data='4' cx="400" cy="110" r="40" stroke="black" stroke-width="3" fill="red" id="4" />
</svg>
推荐答案
只有两件事需要纠正才能使其按预期工作:
There are just two things to correct to make it work as expected:
Like I mentioned in my answer to your first question on this topic, the key function is executed twice while matching data to DOM elements. To bind data to existing DOM elements you have to use the technique as laid out in Join existing elements of the DOM to data with d3.js. In your case the key function becomes
.data(data, function(d) {
return (d && d.train) || this.id;
})
第一个表达式d && d.train检查d是否引用了实际值，如果为true，则评估为其属性.train.在data参数中为每个数据执行键功能时就是这种情况.如果d是undefined，则有条件地对第二个表达式this.id求值，这是针对所选元素(即已经存在的元素)执行键功能时的情况.如果找到匹配项，则将相应的基准面绑定到该元素.
The first expression d && d.train checks if d refers to an actual value and, if true, evalutates to its property .train. This is the case while the key function is executed for each datum in the data argument. The second expression this.id is conditionally evaluated if d is undefined which is the case while the key function is executed for the selected, i.e. already existing, elements. If a match is found the respective datum is bound to the element.
您只对更新DOM中已经存在的元素感兴趣.因此，您根本不需要使用回车选择. .data()返回的更新选择就足够了.您可以直接将呼叫打到.enter().
You are only interested in updating elements which already exist in the DOM. For that reason you do not need to use the enter selection at all. The update selection which is returned by .data() will suffice. You can just drop the call to .enter().
看看下面的代码片段，看看它的实际效果:
Have a look at the following snippet to see it in action:
var data = [{
train: 1
}, {
train: 2
}, {
train: 3
}, {
train: 4
}]
var svg = d3.select('svg')
var tip = d3.tip()
.attr('class', 'd3-tip')
.offset([-10, 0])
.html(function(d) {
return "<strong>Frequency:</strong> <span style='color:red'>" + d.train + "</span>";
})
svg.call(tip);
let selectedElms = d3.selectAll('circle')
.data(data, function(d) {
return (d && d.train) || this.id;
})
selectedElms
.on('mouseover', tip.show)
.on('mouseout', tip.hide);
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
<script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>
<svg height="400" width="500">
<circle data='1' cx="100" cy="110" r="40" stroke="black" stroke-width="3" fill="red" id="1" />
<circle data='2' cx="200" cy="110" r="40" stroke="black" stroke-width="3" fill="red" id="2" />
<circle data='3' cx="300" cy="110" r="40" stroke="black" stroke-width="3" fill="red" id="3" />
<circle data='4' cx="400" cy="110" r="40" stroke="black" stroke-width="3" fill="red" id="4" />
</svg>
这篇关于使用d3-tip.js在悬停上显示工具提示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
