无法将 this.set() 用于 D3 条形图中的"悬停标签"

Question

在我的 Ember 应用程序中，我有一个 D3 堆叠条形图，我正在尝试设置一个"悬停标签"值以在我的工具提示代码中使用。悬停代码在这里：

  .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);
      })

当我将鼠标悬停在栏上时，"d.data.label"的控制台日志会将正确的标签打印到控制台。"悬停标签"控制台日志返回未定义的错误。我在另一个组件中使用此代码，并得到了所需的结果，所以我有点卡住了。

完整方法链：

  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

如果你正在为余烬组件设置一个属性'hoveredLabel'，你应该用'get'来获取它们。我假设"这个"是你的余烬组件？

尝试

this.get('hoveredLabel')