使用d3.tip

Question

当前d3条形图的值正在运行，但是其被鼠标悬停触发了：

 g.append('g')
    .selectAll('g')
    .data(data)
    .enter()
    .append('g')
    .attr('transform', d => 'translate(' + x0(d.State) + ',0)')
    .selectAll('rect')
    .data(d => keys.map(key => {return {key: key, value: d[key]}}))
    .enter().append('rect')
     .attr('x', d => x1(d.key))
     .attr('y', d => y(d.value))
     .attr('width', x1.bandwidth())
     .attr('height', d => innerHeight - y(d.value))
     .attr('fill', d =>  z(d.key))
      .on('mouseover', tip.show)
      .on('mouseout', tip.hide)

这是使用d3.tip的代码

const tip = d3.tip()
 .attr('class', 'd3-tip')
  .offset([-10, 0])
  .html(function(d) {

   return "<strong><b style='color:#a9a9a9;font-size:18px;'>"+d.key+"</b>:</strong> <span class="+ GColor(d.key) +" style=font-size:16px; border: 1px solid green; padding: 0 20px 0 0 ><br><br>" + d.value + "</span>";
                      })

此代码正在使用顶部显示的mouse hover和d3.tip html起作用。

但是问题是：

在没有d.value代码的情况下创建.enter().append('rect')后立即创建rect会显示mouse hover吗？

我尝试了一些尝试，但是替换该代码没有成功

.on('mouseover', tip.show)

类似.append('text').Text(d.value)

任何伟大的想法都值得赞赏。