无法从d3事件处理程序调用函数

时间:2018-02-16 08:16:12

标签: reactjs nvd3.js

我想从d3事件处理程序调用一个函数。我能够访问点击事件,因为我能够打印控制台消息,但是如果我从那里调用函数则会出错。

我收到了以下错误:

bundle.js:96593未捕获的TypeError:无法读取属性' selectNodeById'在SVGGElement中未定义。 (bundle.js:96593)在SVGGElement .__ onclick(bundle.js:28032)

代码

import React, { Component } from 'react';
import NVD3Chart from 'react-nvd3';
import d3 from 'd3';

const datum = [{
x: 'Meter 1',
y: 5
}, {
x: 'Meter 2',
y: 2
}, {
x: 'Meter 3',
y: 9
}, {
x: 'Meter 4',
y: 7
}, {
x: 'Meter 5',
y: 4
}, {
x: 'Meter 6',
y: 3,
}, {
x: 'Meter 7',
y: 0.5
}];

const tooltip = d3.select('body')
.append('div')
.style('position', 'absolute')
.style('padding', '9px')
.style('font', '12px')
.style('font-family', 'sans-serif')
.style('background', 'steelblue')
.style('color', 'white')
.style('text-align', 'center')
.style('z-index', '10')
.style('cursor', 'pointer')
.style('visibility', 'hidden')
.style('border', '1px')
.style('border-radius', '3px')
.style('pointer-events', 'none')
.text('ahu tooltip');

export default class extends Component {
constructor(props) {
    super(props);
    this.selectNodeById = this.selectNodeById.bind(this);
}

selectNodeById() {
    console.log('in select node func');
}

renderEnd() {
    d3.selectAll('.nv-pie').selectAll('.nv-slice').style('cursor', 
'pointer')
        .on('mouseover', (event) => {
            tooltip.style('left', (d3.event.clientX + 30) + 'px')
                .style('top', (d3.event.clientY - 40) + 'px');
            tooltip.html(() => '<strong>' + event.data.x + '</strong> <br/> 
<span style= {
                "color:red"
            } > ' + event.data.y + ' < /span>');
            tooltip.style('visibility', 'visible');
        })
        .on('mouseout', () => {
            tooltip.style('visibility', 'hidden');
        })
        .on('click', () => {
            this.selectNodeById();
            tooltip.style('visibility', 'hidden');
        });
}

render() {
    return ( < NVD3Chart x = {
            d => d.x
        }
        y = {
            d => d.y
        }
        id = {
            'pieChart'
        }
        type = {
            'pieChart'
        }
        datum = {
            datum
        }
        useInteractiveGuideline = {
            true
        }
        transitionDuration = {
            500
        }
        showLegend = {
            false
        }
        growOnHover = {
            true
        }
        ready = {
            this.renderEnd
        }
        />
    );
}
}

0 个答案:

没有答案