问题描述
我正在尝试使用Angular,d3 v4,d3-tip在svg中实现工具提示.
I'm trying to implement a tooltip in svg using Angular, d3 v4, d3-tip.
这是JS逻辑
var data = [{
train: 1
}, {
train: 2
}, {
train: 3
}, {
train: 4
}]
const tip = d3Tip()
let svg =d3.select('svg')
tip
.offset([-10, 0])
.html(d => {
return (
`<strong>Frequency:</strong> <span style="color:red"> test</span>"`
)
})
svg.call(tip)
let selectedElms = d3.selectAll('circle')
.data(data, function(d) {
console.log(this.id)
return (d && d.train) || this['id'];
})
selectedElms
.on('mouseover', tip.show)
.on('mouseout', tip.hide);
}
问题是屏幕上什么都没有显示,但是我注意到当我将鼠标悬停在元素上时,会触发tip
函数(chrome调试器)
The problem is that nothing is shown on screen but I have noticed that when I hover the elements the tip
function is triggered ( chrome debugger )
return (
`<strong>Frequency:</strong> <span style="color:red"> test</span>"`
)
这是一个演示用于代码工作,但是很遗憾,我无法重现该错误.
Here's a demo for code working but unfortunately I can't reproduce the error.
我要提到的是我的真实示例,该代码位于可观察的订阅中
I want to mention that is my real example that this code bellow is inside an observable subscription
let selectedElms = d3.selectAll('circle')
.data(data, function(d) {
console.log(this.id)
return (d && d.train) || this['id'];
})
selectedElms
.on('mouseover', tip.show)
.on('mouseout', tip.hide);
}
推荐答案
如果您的问题不是根据动态数据显示工具提示,则替换以下代码,该工具提示将开始显示-
If your issue is tooltip not showing as per dynamic data then replace the below code, the tooltip will start showing -
tip.offset([-10, 0]).html(d => {
return (
"<strong>Frequency:</strong> <span style='color:red'>" +
d.train + "</span>"
);
});
希望它会对您有所帮助:)
Hope it will help you :)
这篇关于使用d3-tip的工具提示未显示的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!