I have a D3 bar chart and I am trying to make a toggle that will display the label and count values in a bit of text on the component template.
I have the label value working as follows:
highlightedLabel: or('selectedLabel', 'hoveredLabel'),
.on('mouseover', d => {
this.set('hoveredLabel', d.data.label);
})
.on('mouseout', () => {
this.set('hoveredLabel', null);
})
.on('click', d => {
let clickedLabel = d.data.label;
if (this.get('on-click')) {
this.get('on-click')(clickedLabel);
} else {
if (clickedLabel === this.get('selectedLabel')) {
this.set('selectedLabel', '');
} else {
this.set('selectedLabel', clickedLabel);
}
this.buildChart();
}
})
The above gives me the desired result for the label value. I tried to include the 'count1' value as follows:
highlightedCount: or('selectedCount', 'hoveredCount'),
highlightedLabel: or('selectedLabel', 'hoveredLabel'),
.on('mouseover', d => {
this.set('hoveredLabel', d.data.label);
this.set('hoveredCount', d.data.count1);
})
.on('mouseout', () => {
this.set('hoveredLabel', null);
this.set('hoveredCount', null);
})
.on('click', d => {
let clickedLabel = d.data.label;
let clickedCount = d.data.count1;
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();
}
})
However I don't get the correct behaviour. The hover element works correctly but when I click the bar to toggle on the count value, the value only exists as long as I am hovering over a bar. It doesn't persist like the label value does.
The values are added to the template simply with
Aucun commentaire:
Enregistrer un commentaire