React JS d3 Charts ToolTip

问题

I got the basic D3 linechart using react-d3, but I could see any source written for adding tooltip appearance. Do anyone has idea on the tooltip display in react platform?

I have tried react-d3-tooltip as well, but getting errors when trying to plot. This is my implementation with react tool tip module:

<LineTooltip
  data={data}
  colors={colorScale}
  width={width}
  height={height}
  yAxisLabel="FARE"
  xAxisLabel="FARE"
  chartSeries= {dataSeries}
  viewBoxObject=
    {{
      x: 0,
      y: 0,
      width: 850,
      height: 400
    }}
  legend={true}
  x={x}
  y={y}
  xScale= {x}
  yScale= {y}
  gridHorizontal={true}
  gridVertical={true}
  gridVerticalStrokeDash={'2, 2'}
  gridHorizontalStrokeDash={'2, 3'}>

回答1:

You may want to look at foxToolTip.js

https://github.com/MichaelRFox/foxToolTip.js

In the README.md there's a bl.ocks link to a d3 demo.

回答2:

Yeah, that was tricky. I have done it by adding dots (with mouseOver and mouseOut events) and tooltips on the coordinates and then toggling it with css.

<style>
    .tltp {
            display: none;
            text-align: center;
            background-color: $bgColor;
            color:$mainColor;
            border-style:solid;
            border:1px solid $mainColor;
            border-radius: 5px;
            -moz-border-radius: 5px;
        }
        .tltp.hovered {
            display: inline;
        }
    </style> 

    <div className="DataPreview">
                <svg width={this.state.width} height={this.state.height}  >
                <text className="title" x="50%" y={`${this.margin.top / 2 + 18 / 2}`} textAnchor="middle">{this.state.chartTitle}</text> 
                <g transform={`translate(${this.margin.left}, ${this.margin.top})`}>
                    {this.state.data.length > 0 ? this.path() : []}
                    <g ref="x" className="x axis" transform={`translate(0, ${this.state.height - this.margin.top - this.margin.bottom})`}>
                        {this.state.data.length > 0 ? this.drawXAxis() : []}
                    </g>
                    <g ref='y' className="y axis">
                        {this.state.data.length > 0 ? this.drawYAxis() : []}
                    </g>

                    <g ref='dots' className="dots">
                        {
                            this.state.data.map((d, i) => 
                                <g key={i}>
                                    <circle 
                                        onMouseOver={() => document.getElementById("tltp_" + i).classList.add("hovered") } 
                                        onMouseOut={ () => document.getElementById("tltp_" + i).classList.remove("hovered")} 
                                        className="dot" cx = { this.x(new Date(d.x)) } cy = { this.y(d.y) } r={3} />

                                </g>)
                        }
                    </g>
                        {
                            this.state.data.map((d, i) =>
                                <foreignObject id={"tltp_" + i} key={i} width="120" height="40" className="tltp" x={this.x(new Date(d.x)) - 60} y={this.y(d.y) - 50}>
                                    <b>{d.x.split("T")[0]}</b><br />
                                    <span>{d.y.toFixed(6)}</span>
                                </foreignObject>
                            )
                        }
                </g>
            </svg>

来源：https://stackoverflow.com/questions/38116805/react-js-d3-charts-tooltip

标签

d3.js

reactjs

linechart