无法在D3条形图中将this.set（）用于'hoveredLabel'

Question

In my Ember appliation I have a D3 Stacked Bar Chart and I am trying to set a 'hoveredLabel' value for use in my tooltip code. The hover code is here:

  .on('mouseover', d => {
        this.set('hoveredLabel', d.data.label);
        this.set('hoveredCount', d.data.count1);
        console.log(d.data.label)
        console.log(hoveredLabel)
      })
      .on('mouseout', () => {
        this.set('hoveredLabel', null);
        this.set('hoveredCount', null);
      })

The console log for 'd.data.label' prints the correct label to the console when I hover over the bar. The 'hoveredLabel' console log returns an undefined error. I am using this code in another component and I get the desired result so I'm a bit stuck.

Full method chain:

  svg.append("g")
    .selectAll("g")
    .data(series)
    .enter().append("g")
      .attr("fill", function(d) { return z(d.key); })
    .selectAll("rect")
    .data(function(d) { return d; })
    .enter().append("rect")
      .attr("width", x.bandwidth)
      .attr("x", function(d) { return x(d.data.label); })
      .attr("y", function(d) { return y(d[1]); })
      .attr("height", function(d) { return y(d[0]) - y(d[1]); })
      .on('start', (data, index) => {
        if (index === 0) {
          (function updateTether() {
            Tether.position()
            rafId = requestAnimationFrame(updateTether);
          })();
        }
      })
      .on('end interrupt', (data, index) => {
        if (index === 0) {
          cancelAnimationFrame(rafId);
        }
      })
      .attr('opacity', d => {
        let selected = this.get('selectedLabel');

        return (selected && d.data.label !== selected) ? '0.5' : '1.0';
      })
      .on('mouseover', d => {
        this.set('hoveredLabel', d.data.label);
        this.set('hoveredCount', d.data.count1);
        console.log(d.data.label)
        console.log(hoveredLabel)
      })
      .on('mouseout', () => {
        this.set('hoveredLabel', null);
        this.set('hoveredCount', null);
      })
      .on('click', d => {
        let clickedLabel = d.data.label;
        let clickedCount = d.data.count1;
        // console.log(clickedLabel, clickedCount)

        if (this.get('on-click')) {
          this.get('on-click')(clickedLabel);
        } else {
          if (clickedLabel === this.get('selectedLabel')) {
            this.set('selectedLabel', '');
            this.set('selectedCount', '');
          } else {
            this.set('selectedLabel', clickedLabel);
            this.set('selectedCount', clickedCount);
          }

          this.buildChart()
        }
      });

Answer 1

If you are setting a property 'hoveredLabel' for a ember component , You should get them with 'get'. I assume that 'this' is your ember component ?

Try

this.get('hoveredLabel')