反应D3折线图缺少工具提示

时间:2017-01-12 13:50:20

标签: javascript reactjs d3.js charts

以下是我们用于显示折线图的代码。但是,我们没有看到启用工具提示。有关寻找什么的任何建议?对不起新的反应框架。区域图的类似代码可以正常使用工具提示。

import React, { Component } from 'react';
import D3Chart from '../area/D3Chart';
import DataUtils from '../../utils/DataUtils';

export default class LineChart extends Component {
     xTicksFormat(d) {
         if (this.props.xMappingData) {
             let retVal =  DataUtils.findMapping(this.props.xMappingData, d-1);
             if (retVal)
                 return retVal;
             else
                 return '';
         }
         else if (this.props.xMappingData2) {
             let retVal = DataUtils.findMapping2(this.props.xMappingData2, d);
             if (retVal)
                 return retVal;
         }
         else
             return d;
     }

    yTicksFormat(d) {
        return d;
    }

    render(){
        var data= this.props.data;
        var margin={
            top: 50, right: 30, bottom: 50, left: 50
        };

        return(
            <div className="row  outerbox bigChart">
                <div className="col-md-12 custom_padding" >
                        <D3Chart data={data} xData="x" yData="y" margin={margin} interpolations="basis" xMaxBuffer={-30}
                                         yMaxBuffer={20} id="line-chart" width={480} height={400} type="line">
                            <yGrid orient="left" className="y-grid" ticks={12} title={data.yTitle} ticksFormat={this.yTicksFormat.bind(this)}/>
                            <xGrid orient="bottom" className="x-grid" ticks={5} title={data.xTitle} ticksFormat={this.xTicksFormat.bind(this)}/>
                            <line />
                            <path className="line shadow" strokeLinecap="round"/>

                            <tooltip textStyle1="tooltip-text1"
                                textStyle2="tooltip-text1" bgStyle="tooltip-bg"
                                xValue="Date" yValue="Count"/>
                            {/*<axisTitle text={data.xTitle} axisType='x' />
                            <axisTitle text={data.yTitle} axisType='y'/> */}
                        </D3Chart>
                </div>
                <span className="chartPadding"></span>
            </div>
        );
    }
}

0 个答案:

没有答案