Control label position in bb_radarchart about billboarder

[pvictor]

Hi!
So there is no option to place the labels at different position, but you can use a JavaScript callback (warning you cannot select an axis by names, e.g. "Speed", only by position, see the arrow in JS function) :

library("billboarder")
library("dplyr")
data("avengers")

avengersSub <- avengers %>%
  filter(group == 'Thor') %>%
  filter(axis %in% c('Durability','Speed','Energy'))

bb <- billboarder() %>%
  bb_radarchart(
    data = avengersSub,
    mapping = bbaes(x = axis, y = value, group = group)
  ) %>%
  bb_radar(level = list(show = FALSE)) %>%
  bb_data(
    labels = TRUE # list(position = list(x = 10))
  )
bb$x$bb_opts$onrendered <- htmlwidgets::JS(
  "function() {

    // Durability
    d3.selectAll('.bb-texts .bb-text-1').each(function() { //  <<<<<-------- Durability is 'bb-text-1' (only for this chart)
	      var text = d3.select(this);
  
        text.attr('x', (+text.attr('x') - 10)).attr('y', (+text.attr('y') + 20))
    });

    // Energy
    d3.selectAll('.bb-texts .bb-text-2').each(function() { // <<<<<-------- Energy is 'bb-text-2' (only for this chart)
  	      var text = d3.select(this);
          text.attr('x', (+text.attr('x') + 10)).attr('y', (+text.attr('y') + 20))
    });
   }"
)
bb

Victor

[andrefsferreira]

Victor,

Thank you for your help. The provided code serves the purpose perfectly.

Regards,
André

[pvictor]

I added a function to use callbacks, so with dev version you can add the onrendered func in the pipe workflow :

billboarder() %>%
  bb_radarchart(
    data = avengersSub,
    mapping = bbaes(x = axis, y = value, group = group)
  ) %>%
  bb_radar(level = list(show = FALSE)) %>%
  bb_data(
    labels = TRUE # list(position = list(x = 10))
  ) %>% 
  bb_callbacks(
    onrendered = "function() {
  
    // Durability
    d3.selectAll('.bb-texts .bb-text-1').each(function() { //  <<<<<-------- Durability is 'bb-text-1' (only for this chart)
    var text = d3.select(this);
    
    text.attr('x', (+text.attr('x') - 10)).attr('y', (+text.attr('y') + 20))
    });
    
    // Energy
    d3.selectAll('.bb-texts .bb-text-2').each(function() { // <<<<<-------- Energy is 'bb-text-2' (only for this chart)
    var text = d3.select(this);
    text.attr('x', (+text.attr('x') + 10)).attr('y', (+text.attr('y') + 20))
    });
    }"
  )

Victor