我有d3线图与两行充满了事件,并作出了html工具提示,以显示一些数据,从这些事件上mousemove.它的工作很好,直到你切换到只显示一行的时刻,比工具提示不t receive any data. I
ve记录数据,它是来的工具提示,但工具提示没有收到它的一些原因.检查下面的代码:
const tooltip = d3.select('.Tooltip')
.style('visibility', 'hidden')
.style('pointer-events', 'none')
function mousemove (event) {
// recover coordinate we need
const mouse = d3.pointer(event, this)
const [xm, ym] = (mouse)
const mouseWindows = d3.pointer(event, d3.select(this))
const [xmw, ymw] = (mouseWindows)
const i = d3.least(I, i => Math.hypot(xScale(X[i]) - xm, yScale(Y[i]) - ym)) // closest point
path.style('stroke-width', ([z]) => Z[i] === z ? strokeWidthHovered : strokeWidth).filter(([z]) => Z[i] === z).raise()
dot.attr('transform', `translate(${xScale(X[i])},${yScale(Y[i])})`)
// console.log(O[i]) <-- this is the data for the current selected event and its fine after
changing the line shown
tooltip
.data([O[i]])
.text(d => console.log(d)) <-- here i log what is coming from data and doesn`t return anything
.style('left', `${tooltipX(xScale(X[i]), offSetX)}px `)
.style('top', `${tipY}px`)
.style('visibility', 'visible')
.attr('class', css.tooltipEvent)
.html(d => chartConfig.options.tooltip.pointFormat(d))
1条答案
按热度按时间brccelvz1#
当你调用
tooltip.data([0[i]])
时,d3返回一个已经与你的数据关联的元素的选择,这对你的工具提示没有意义。如果你已经计算了你想要显示的值(我假设它是 O[i]),那么简单地设置工具提示的文本或html: