Question

我在这里有一个矮人-https://plnkr.co/edit/iOGJUosvruW9KV1FF9lp?p=preview

我有一个工具提示，当您将鼠标悬停在栏上时显示。

我试图将其放置在条形图的中心。

如何定位工具提示，使其位于工具栏的中心

d3.selectAll('.bar').on("mouseover", function(d){
      let xPos = d3.select(this).attr("x")
      let width = d3.select(this).attr("width")/2
      let tipPos = +xPos+width
      let html = d.day
      console.log('tipPos '+tipPos)
      d3.select('.chart-tooltip').style("display", null)

      d3.select('.chart-tooltip')
      .style("left", tipPos + "px")
      .style("top",  30 + "px")
        .html(html)

    })

    .on("mouseout", ()=>{
      d3.select('.chart-tooltip').style("display", "none")
    })

Answer 1

您可以选择y和height属性，并将其设置为

d3.selectAll('.bar').on("mouseover", function(d){
  let xPos = d3.select(this).attr("x")
  let width = d3.select(this).attr("width")/2
  let thisHeight = Number(d3.select(this).attr("height")) / 2
  let thisY = Number(d3.select(this).attr("y"))
  let tipPos = +xPos+width
  let html = d.day

  console.log(thisHeight, thisY)
  d3.select('.chart-tooltip').style("display", null)

  d3.select('.chart-tooltip')
  .style("left", tipPos + "px")
  .style("top",  margin.top + thisY + thisHeight + "px") // <-- Here
    .html(html)

})

标签将被附加到中间，这是一个叉子

Plunker

D3-位置工具提示

1 个答案: