Ember中D3堆叠柱状图无法用this.set()设置hoveredLabel问题

看起来你遇到的问题其实是作用域访问错误，让我帮你拆解一下：

问题根源 #

你在mouseover回调里用this.set('hoveredLabel', d.data.label)成功设置了组件的属性，但直接写console.log(hoveredLabel)时，JavaScript会在当前函数的局部作用域里找这个变量——而你并没有在这个箭头函数里声明过hoveredLabel，自然会报“未定义”错误。

而console.log(d.data.label)能正常工作，是因为d是回调函数的参数，属于当前作用域的变量。

修正代码 #

要访问Ember组件的属性，你需要通过this来获取，用Ember的get方法（兼容所有Ember版本）或者直接访问类属性（如果你的组件是ES6类写法）：

.on('mouseover', d => { 
  this.set('hoveredLabel', d.data.label); 
  this.set('hoveredCount', d.data.count1); 
  console.log(d.data.label); // 正常打印参数值
  console.log(this.get('hoveredLabel')); // 正确访问组件属性
  // 如果是Ember 3.1+的ES6类组件，也可以直接写：console.log(this.hoveredLabel);
}) 
.on('mouseout', () => { 
  this.set('hoveredLabel', null); 
  this.set('hoveredCount', null); 
})

额外优化建议 #

为了避免这类作用域混淆，你也可以先把要用到的值存到局部变量里，这样代码更清晰，也能避免重复访问d.data：

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

关于另一组件能正常运行的猜测 #

另一组件能正常工作，大概率是因为那里的代码在访问hoveredLabel时，是通过this来获取的（比如this.hoveredLabel或者this.get('hoveredLabel')），只是你没注意到这个细节差异~

内容的提问来源于stack exchange，提问作者Sorvah