LineTooltip

[benjamin658]

我將LineTooltip的範例套上不同的資料後，圖有正確的畫出來，但是hover時tooltip並沒有出現，另外console log也沒也任何的錯誤，sample code如下

'use strict';
/**
 * Created by Ben Hu on 2015/11/24.
 */
import React from 'react';
import d3 from 'd3';
import {LineTooltip} from 'react-d3-tooltip';

const MyLineChart = React.createClass({
    render(){
        var chartData = this.props.allBalance;
        var parseDate = d3.time.format("%Y").parse;
        var width = 1000,
            height = 350,
            margins = {left: 100, right: 100, top: 50, bottom: 50},
            chartSeries = [
                {
                    field: 'balance',
                    name: 'Balance',
                    color: '#3498db',
                    style: {
                        "stroke-width": 3,
                        "stroke-opacity": .7,
                        "fill-opacity": .0
                    }
                },
                {
                    field: 'yearExportValue',
                    name: 'Export',
                    color: '#8e44ad',
                    style: {
                        "stroke-width": 3,
                        "stroke-opacity": .7,
                        "fill-opacity": .0
                    }
                },
                {
                    field: 'yearImportValue',
                    name: 'Import',
                    color: '#ff7f0e',
                    style: {
                        "stroke-width": 3,
                        "stroke-opacity": .7,
                        "fill-opacity": .0
                    }
                }
            ],
            title = this.props.country.toUpperCase() + " Trade Balance",

            x = function (d) {
                return parseDate(d.year);
            },

            xRange = [0, width - margins.left - margins.right],

            yRange = [height - margins.top - margins.bottom, 0],

            yDomain = [
                d3.min(chartData, function (d) {
                    return d.balance;
                }),
                d3.max(chartData, function (d) {
                    return d.yearExportValue;
                })
            ],

            xScale = 'time';
        return (

            <LineTooltip
                margins={margins}
                title={title}
                data={chartData}
                width={width}
                height={height}
                chartSeries={chartSeries}
                x={x}
                xRange={xRange}
                xScale={xScale}
                yRange={yRange}
                yDomain={yDomain}
                />

        )
    }
});

export default MyLineChart;

資料格式如下

[
{
year: "1996",
yearExportValue: 115939232,
yearImportValue: 102367832,
balance: 13571400,
status: "trade surplus"
},
{
year: "1997",
yearExportValue: 122077877,
yearImportValue: 114421916,
balance: 7655961,
status: "trade surplus"
},
{
year: "1998",
yearExportValue: 110579613,
yearImportValue: 104661545,
balance: 5918068,
status: "trade surplus"
},
{
year: "1999",
yearExportValue: 121587866,
yearImportValue: 110684868,
balance: 10902998,
status: "trade surplus"
},
{
year: "2000",
yearExportValue: 148316282,
yearImportValue: 140004900,
balance: 8311382,
status: "trade surplus"
},
{
year: "2001",
yearExportValue: 126313837,
yearImportValue: 107965539,
balance: 18348298,
status: "trade surplus"
},
{
year: "2002",
yearExportValue: 135312632,
yearImportValue: 113237862,
balance: 22074770,
status: "trade surplus"
},
{
year: "2003",
yearExportValue: 150594744,
yearImportValue: 128007459,
balance: 22587285,
status: "trade surplus"
},
{
year: "2004",
yearExportValue: 182363733,
yearImportValue: 168750606,
balance: 13613127,
status: "trade surplus"
},
{
year: "2005",
yearExportValue: 198424333,
yearImportValue: 182610211,
balance: 15814122,
status: "trade surplus"
},
{
year: "2006",
yearExportValue: 224012938,
yearImportValue: 202694857,
balance: 21318081,
status: "trade surplus"
},
{
year: "2007",
yearExportValue: 246738914,
yearImportValue: 219320362,
balance: 27418552,
status: "trade surplus"
},
{
year: "2008",
yearExportValue: 255624848,
yearImportValue: 240444373,
balance: 15180475,
status: "trade surplus"
},
{
year: "2009",
yearExportValue: 203677115,
yearImportValue: 174413522,
balance: 29263593,
status: "trade surplus"
},
{
year: "2010",
yearExportValue: 274613069,
yearImportValue: 251367487,
balance: 23245582,
status: "trade surplus"
},
{
year: "2011",
yearExportValue: 308286826,
yearImportValue: 281586165,
balance: 26700661,
status: "trade surplus"
},
{
year: "2012",
yearExportValue: 301076384,
yearImportValue: 270706758,
balance: 30369626,
status: "trade surplus"
},
{
year: "2013",
yearExportValue: 305437260,
yearImportValue: 269893213,
balance: 35544047,
status: "trade surplus"
},
{
year: "2014",
yearExportValue: 313691879,
yearImportValue: 274021984,
balance: 39669895,
status: "trade surplus"
},
{
year: "2015",
yearExportValue: 142413431,
yearImportValue: 116658484,
balance: 25754947,
status: "trade surplus"
}
]

感謝！

[benjamin658]

先判斷data陣列的長度大於0才render LineTooltip後就可以運作了

'use strict';
/**
 * Created by Ben Hu on 2015/11/24.
 */
import React from 'react';
import d3 from 'd3';
import {LineTooltip} from 'react-d3-tooltip';
import TradeBalanceAction from '../../actions/TradeBalanceAction';
import TradeBalanceStore from '../../stores/TradeBalanceStore';

const MyLineChart = React.createClass({
    getInitialState(){
        return {
            chartData: TradeBalanceStore.getState().allTradeBalance
        }
    },

    componentDidMount(){
        TradeBalanceStore.listen(this._onTradeBalanceChange);

        if (this.isMounted()) {
            TradeBalanceAction.getAllTradeBalance(this.props.country);
        }
    },

    componentWillUnmount() {
        TradeBalanceStore.unlisten(this._onTradeBalanceChange);
    },

    _onTradeBalanceChange(tradeBalanceData){
        this.setState({
            chartData: tradeBalanceData.allTradeBalance,
            yearTradeBalanceData: tradeBalanceData.yearTradeBalance
        });
    },

    render(){
        var parseDate = d3.time.format("%Y").parse;
        var width = 1000,
            height = 350,
            margins = {left: 100, right: 100, top: 50, bottom: 50},
            chartSeries = [
                {
                    field: 'balance',
                    name: 'Balance',
                    color: '#3498db',
                    style: {
                        "stroke-width": 3,
                        "stroke-opacity": .7,
                        "fill-opacity": .0
                    }
                },
                {
                    field: 'yearExportValue',
                    name: 'Export',
                    color: '#8e44ad',
                    style: {
                        "stroke-width": 3,
                        "stroke-opacity": .7,
                        "fill-opacity": .0
                    }
                },
                {
                    field: 'yearImportValue',
                    name: 'Import',
                    color: '#ff7f0e',
                    style: {
                        "stroke-width": 3,
                        "stroke-opacity": .7,
                        "fill-opacity": .0
                    }
                }
            ],
            title = this.props.country.toUpperCase() + " Trade Balance",

            x = function (d) {
                return parseDate(d.year);
            },

            xRange = [0, width - margins.left - margins.right],

            yRange = [height - margins.top - margins.bottom, 0],

            yDomain = [
                d3.min(this.state.chartData, function (d) {
                    return d.balance;
                }),
                d3.max(this.state.chartData, function (d) {
                    return d.yearExportValue;
                })
            ],

            xScale = 'time';

        return (
            <div>
                {(this.state.chartData.length > 0)
                    ? <LineTooltip
                    margins={margins}
                    title={title}
                    data={this.state.chartData}
                    width={width}
                    height={height}
                    chartSeries={chartSeries}
                    x={x}
                    xRange={xRange}
                    xScale={xScale}
                    yRange={yRange}
                    yDomain={yDomain}/>
                    : <div>rendering...</div>
                }
            </div>
        )
    }
});

export default MyLineChart;