d3.js工具提示未正确接收数据

fzsnzjdm  于 2022-11-12  发布在  其他
关注(0)|答案(1)|浏览(110)

我有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))
brccelvz

brccelvz1#

当你调用tooltip.data([0[i]])时,d3返回一个已经与你的数据关联的元素的选择,这对你的工具提示没有意义。如果你已经计算了你想要显示的值(我假设它是 O[i]),那么简单地设置工具提示的文本或html:

tooltip.html(chartConfig.options.tooltip.pointFormat(O[i]);

相关问题