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()
}
});
Aucun commentaire:
Enregistrer un commentaire