Question

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

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

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

Answer 1

您可能需要查看foxToolTip.js

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

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

Answer 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>

React JS d3 Charts ToolTip

2 个答案: