将鼠标悬停在 D3.js 折线图中未定义的数据点 returns 上

Question

问题出在这里- d[0] 和 d[1] return undefined，但我不知道如何访问数据。

我已经尝试了 d.Wavelength（d[0] 处的列名称），但这不起作用。在示例中（下面的 link）使用了 d.value，但我需要访问 d[0] 和 d[1].

处的值

  function m_over(data){
    ttip.datum(data)
        .style("visibility","visible")
        .text(function(d){
              return ("Wavelength: " + d[0] + ", Sample_1_Absorbance: " + d[1])
              })
  }

  function m_out(data){
    ttip.style("visibility","hidden");
  }

  function m_move(data){
    ttip.style("top", (event.pageY - 10) + "px").style("left", (event.pageX + 10) + "px");
  }

  svg.selectAll('circle_samp_1')
     .data(data_in_range)
     .enter()
     .append('circle')
     .attr('cx', (d) => xScale(d[0]))
     .attr('cy', (d) => yScale(d[1]))
     .attr('r', 7)
     .attr('fill', 'rgba(0,0,0,0.1)')
     .attr('stroke', 'rgba(0,0,0,0.9)')
     .attr('stroke-width', 1)
     .attr('class', 'points')
     .style('pointer-events', 'all')
     .on("mouseover",function (d){
        return m_over(d)
     })
     .on("mousemove", function (d) {
        return m_move(d)
     })
     .on("mouseout", function (d) {
        return m_out(d)
     });

我正在尝试重新创建 this example. This is a similar issue to another example 我已经尝试重新创建，问题出在这里。在这个例子中，代码是 d.date，所以我尝试如下调整它（最后一行），并使用 d0[0] 但这不起作用。

  function mousemove() {
        var x0 = xScale.invert(d3.pointer(event, this)[0]),
        i = d3.bisect(data, x0, 1),
        d0 = xScale(data[i - 1]),
        d1 = xScale(data[i]),
        d = x0 - d0.Wavelength > d1.Wavelength - x0 ? d1 : d0;

这是我的图表的屏幕截图：

如果您想查看我的数据或其余代码，请告诉我，我会添加进去。提前致谢。

Answer 1

我认为您需要调整事件侦听器。

例如，在“mouseover”函数中，第一个参数是鼠标事件，第二个参数是附加到调度该事件的元素的数据...

.on("mouseover",(event, d)=>{
      //check what we're passing to the m_over function
      console.log('data:', d); 
      m_over(d);
})

这是一个非常简单的例子来说明这个概念 https://codepen.io/tomp/pen/wveRNmV

将鼠标悬停在 D3.js 折线图中未定义的数据点 returns 上

Hover on data point returns undefined in D3.js line chart

javascript

d3.js