[英]How to add tooltip to a react + d3 grouped and stacked bar chart?
[英]how to add tooltip in react d3 v4 bar chart
我必須在鼠標懸停時在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");
但它不起作用。 有人可以幫我嗎?
謝謝,阿倫·S
我在您對原始GitHub存儲庫的此fork的注釋中鏈接的示例中添加了工具提示。
我創建了一個Tooltip
組件。 當然,請記住,這不一定是向使用D3的React應用程序添加工具提示的“正確”方法或唯一方法。
我經歷了以下步驟:
Chart
組件中的創建狀態,該狀態跟蹤數據當前懸停在其上的條(如果有)
在Bars
組件中創建onMouseOver
和onMouseOut
事件,以確定剛剛懸停或離開的柱,並將其向上傳遞到Chart
組件以設置新狀態
將狀態從“ Chart
組件傳遞回我創建的“ Tooltip
組件
Tooltip
組件如下所示:
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>
)
}
我在“ Chart
組件中使用了它,並跟蹤了當前懸停的柱狀圖的狀態:
class Chart extends Component {
constructor(props) {
super(props)
this.xScale = scaleBand()
this.yScale = scaleLinear()
this.state = {
hoveredBar: null
}
}
render() {
const margins = { top: 50, right: 20, bottom: 100, left: 60 }
const svgDimensions = {
width: Math.max(this.props.parentWidth, 300),
height: 500
}
const maxValue = Math.max(...data.map(d => d.value))
const xScale = this.xScale
.padding(0.5)
.domain(data.map(d => d.title))
.range([margins.left, svgDimensions.width - margins.right])
const yScale = this.yScale
.domain([0, maxValue])
.range([svgDimensions.height - margins.bottom, margins.top])
return (
<div className="Chart">
<svg width={svgDimensions.width} height={svgDimensions.height}>
<Axes
scales={{ xScale, yScale }}
margins={margins}
svgDimensions={svgDimensions}
/>
<Bars
scales={{ xScale, yScale }}
margins={margins}
data={data}
maxValue={maxValue}
svgDimensions={svgDimensions}
onMouseOverCallback={datum => this.setState({hoveredBar: datum})}
onMouseOutCallback={datum => this.setState({hoveredBar: null})}
/>
</svg>
{ this.state.hoveredBar ?
<Tooltip
hoveredBar={this.state.hoveredBar}
scales={{ xScale, yScale }}
/> :
null
}
</div>
)
}
}
然后在Bars
組件中設置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>
)
}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.