Reactjs 如何在react d3 v4条形图中添加工具提示

我必须在鼠标上方的react d3 v4条形图上添加工具提示。我尝试了下面提到的自定义功能

onMouseOverHandler(d){
   var tooltip = d3Select("body").append("div")   
    .attr("class", "tooltip")               
    .style("opacity", 0);

    tooltip.transition().duration(200).style("opacity", .9);      
    tooltip.html(d)  
    .style("left", d3Select(this).attr("cx") + "px")     
    .style("top", d3Select(this).attr("cy") + "px");

但它不起作用。有人能帮我做这个吗

谢谢，

---

Arun S

我在你的评论中链接到的示例中添加了一个工具提示

我创建了一个

工具提示

组件。当然，请记住，这不一定是向使用D3的React应用程序添加工具提示的“正确”或唯一方法

我完成了以下步骤：

在

图表

组件中创建的状态，用于跟踪当前悬停条形图（如果有）的数据

在

条形图

组件中创建

onMouseOver

和

onMouseOut

事件，以确定哪个条形图刚刚悬停或离开，并将其传递到

图表

组件以设置新状态

将状态从

图表

组件传递回我创建的

工具提示

组件

工具提示

组件如下所示：

export default ({hoveredBar, scales}) => {
  const { xScale, yScale } = scales
  const styles = {
    left: `${xScale(hoveredBar.title) - 30}px`,
    top: `${yScale(hoveredBar.value)}px`
  }

  return (
    <div className="Tooltip" style={styles}>
      <table>
        <thead>
          <tr>
            <th colSpan="2">{hoveredBar.title}</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td colSpan="1">Bodies</td>
            <td colSpan="1">{hoveredBar.value}</td>
          </tr>
          <tr>
            <td colSpan="1">Year</td>
            <td colSpan="1">{hoveredBar.year}</td>
          </tr>
        </tbody>
      </table>
    </div>
  )
}

我在

栏

组件中设置

onMouseOver

和

onMouseOut

事件：

export default class Bars extends Component {
  constructor(props) {
    super(props)

    this.colorScale = scaleLinear()
      .domain([0, this.props.maxValue])
      .range(['#F3E5F5', '#7B1FA2'])
      .interpolate(interpolateLab)
  }

  render() {
    const { scales, margins, data, svgDimensions } = this.props
    const { xScale, yScale } = scales
    const { height } = svgDimensions

    const bars = (
      data.map(datum =>
        <rect
          key={datum.title}
          x={xScale(datum.title)}
          y={yScale(datum.value)}
          height={height - margins.bottom - scales.yScale(datum.value)}
          width={xScale.bandwidth()}
          fill={this.colorScale(datum.value)}
          onMouseOver={() => this.props.onMouseOverCallback(datum)}
          onMouseOut={() => this.props.onMouseOutCallback(null)}
        />,
      )
    )

    return (
      <g>{bars}</g>
    )
  }
}

导出默认类栏扩展组件{
建造师（道具）{
超级（道具）
this.colorScale=scaleLinear（）
.domain（[0，this.props.maxValue]）
.范围（['#F3E5F5'，'#7B1FA2']）
.interpolate（interpolateLab）
}
render（）{
const{scales，margins，data，svgDimensions}=this.props
常数{xScale，yScale}=scales
常数{height}=svgDimensions
常数条=(
data.map（基准=>
this.props.onMouseColllback（基准面）}
onMouseOut={（）=>this.props.onMouseOutCallback（null）}
/>,
)
)
返回(
{bar}
)
}
}

我为您在评论中链接到的示例添加了工具提示

我创建了一个

工具提示

组件。当然，请记住，这不一定是向使用D3的React应用程序添加工具提示的“正确”或唯一方法

我完成了以下步骤：

在

图表

组件中创建的状态，用于跟踪当前悬停条形图（如果有）的数据

在

条形图

组件中创建

onMouseOver

和

onMouseOut

事件，以确定哪个条形图刚刚悬停或离开，并将其传递到

图表

组件以设置新状态

将状态从

图表

组件传递回我创建的

工具提示

组件

工具提示

组件如下所示：

export default ({hoveredBar, scales}) => {
  const { xScale, yScale } = scales
  const styles = {
    left: `${xScale(hoveredBar.title) - 30}px`,
    top: `${yScale(hoveredBar.value)}px`
  }

  return (
    <div className="Tooltip" style={styles}>
      <table>
        <thead>
          <tr>
            <th colSpan="2">{hoveredBar.title}</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td colSpan="1">Bodies</td>
            <td colSpan="1">{hoveredBar.value}</td>
          </tr>
          <tr>
            <td colSpan="1">Year</td>
            <td colSpan="1">{hoveredBar.year}</td>
          </tr>
        </tbody>
      </table>
    </div>
  )
}

我在

栏

组件中设置

onMouseOver

和

onMouseOut

事件：

export default class Bars extends Component {
  constructor(props) {
    super(props)

    this.colorScale = scaleLinear()
      .domain([0, this.props.maxValue])
      .range(['#F3E5F5', '#7B1FA2'])
      .interpolate(interpolateLab)
  }

  render() {
    const { scales, margins, data, svgDimensions } = this.props
    const { xScale, yScale } = scales
    const { height } = svgDimensions

    const bars = (
      data.map(datum =>
        <rect
          key={datum.title}
          x={xScale(datum.title)}
          y={yScale(datum.value)}
          height={height - margins.bottom - scales.yScale(datum.value)}
          width={xScale.bandwidth()}
          fill={this.colorScale(datum.value)}
          onMouseOver={() => this.props.onMouseOverCallback(datum)}
          onMouseOut={() => this.props.onMouseOutCallback(null)}
        />,
      )
    )

    return (
      <g>{bars}</g>
    )
  }
}

导出默认类栏扩展组件{
建造师（道具）{
超级（道具）
this.colorScale=scaleLinear（）
.domain（[0，this.props.maxValue]）
.范围（['#F3E5F5'，'#7B1FA2']）
.interpolate（interpolateLab）
}
render（）{
const{scales，margins，data，svgDimensions}=this.props
常数{xScale，yScale}=scales
常数{height}=svgDimensions
常数条=(
data.map（基准=>
this.props.onMouseColllback（基准面）}
onMouseOut={（）=>this.props.onMouseOutCallback（null）}
/>,
)
)
返回(
{bar}
)
}
}

在这里，我描述了同一问题的解决方案

---

结果看起来

这里我已经描述了同一问题的解决方案

---

结果看起来

你看过tippy.js了吗？这可能会有帮助，而不是自己写出来。你能把它放在JSFIDLE或PLUNK中吗？如果我们不能重现这个问题，我们就无法帮助您解决它。嗨，Ryan，我只是想在下面提到的示例图表中添加工具提示，但我不知道如何添加它。您查看过tippy.js吗？这可能会有帮助，而不是自己写出来。你能把它放在JSFIDLE或PLUNK中吗？如果我们不能重现这个问题，我们就无法帮助您解决它。嗨，Ryan，我只是想在下面提到的示例图表中添加工具提示，但我不确定如何添加它。