Передайте свойство конструктора JavaSscript в функцию mouseover и по-прежнему используйте d3.select (this)

Question

Я пытаюсь использовать d3.select(this) и this.data_ в this.HandleMouseOver.Я пробовал различные способы решения этой проблемы, такие как преобразование .on('mouseover', this.handleMouseOver); в .on('mouseover', function(){ this.handleMouseOver(d3.select(this), this.data_); }); // >> error: this.handleMouseOver is not a function - но пока не повезло (да, я добавил входные данные в handleMouseOver(selection,data).

Любые предложения о том, как я могу получить доступd3.select(this) и this.data_ in handleMouseOver()?

class Chart {
    constructor(opts){
        this.data_ = opts.data_;
        this.width_ = opts.width_;
        this.height_ = opts.height_;
        this.draw(); //create the chart
    }

    draw(){
        this.container = svgContainer.append('g')
            .attr('id', 'country-wrapper')
            .attr('width', this.width_)
            .attr('height', this.height_)
            .attr('transform', 'translate(0,0)')
            .on('mouseover', this.handleMouseOver);
            //.on('mouseout', this.handleMouseOut);

    }

    handleMouseOver(){
        var this_ = d3.select(this);
        console.log(this_, this.data_); // this.data_ >> it says it is undefined
}

Answer 1

Вы можете попробовать выбрать глобальное событие d3.event.target и связать свою область действия с функцией события

class Chart {
    constructor(opts){
        this.data_ = opts.data_;
        this.width_ = opts.width_;
        this.height_ = opts.height_;
        this.draw(); //create the chart
    }

    draw(){
        this.container = svgContainer.append('g')
            .attr('id', 'country-wrapper')
            .attr('width', this.width_)
            .attr('height', this.height_)
            .attr('transform', 'translate(0,0)')
            .on('mouseover', this.handleMouseOver.bind(this));
            //.on('mouseout', this.handleMouseOut);

    }

    handleMouseOver() {
        var this_ = d3.select(d3.event.target);
        console.log(this_, this.data_); // this.data_ >> it says it is undefined
   }
}

или, если вы используете современные функции стрелок, она автоматически связывает ваш контекст

class Chart {
        constructor(opts){
            this.data_ = opts.data_;
            this.width_ = opts.width_;
            this.height_ = opts.height_;
            this.draw(); //create the chart
        }

        draw(){
            this.container = svgContainer.append('g')
                .attr('id', 'country-wrapper')
                .attr('width', this.width_)
                .attr('height', this.height_)
                .attr('transform', 'translate(0,0)')
                .on('mouseover', this.handleMouseOver);
                //.on('mouseout', this.handleMouseOut);

        }

        handleMouseOver = () => {
            var this_ = d3.select(d3.event.target);
            console.log(this_, this.data_); // this.data_ >> it says it is undefined
       }
    }