React JS d3 图表工具提示答案

【问题标题】：React JS d3 Charts ToolTipReact JS d3 图表工具提示
【发布时间】：2016-06-30 07:39:49
【问题描述】：

我使用 react-d3 获得了基本的 D3 折线图，但我可以看到任何为添加工具提示外观而编写的源代码。有人对 React 平台中的工具提示显示有想法吗？

我也尝试过 react-d3-tooltip，但在尝试绘图时出错。这是我使用 react 工具提示模块的实现：

<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'}>

【问题讨论】：

标签： d3.js reactjs linechart

【解决方案1】：

你可能想看看 foxToolTip.js

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

在 README.md 中有一个指向 d3 演示的 bl.ocks 链接。

【讨论】：

谢谢@m fox。但我需要与 React JS 集成。所以在纯反应平台中寻找答案。

【解决方案2】：

是的，这很棘手。我通过在坐标上添加点（使用 mouseOver 和 mouseOut 事件）和工具提示然后使用 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>

【讨论】：