lundi 5 février 2018

How do I extract the Count value from D3 chart to create a toggle?

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