Измените цветной шрифт диаграммы Санки с помощью `networkD3`

Я хочу изменить цвет шрифта или добавить тень в шрифт, чтобы улучшить видимость. Однако я не нашел способа сделать это. Одна альтернатива - использовать сюжетно, но когда вы помещаете сюжетный объект в блестящее приложение и визуализируете его на мобильном телефоне, вы теряете интерактивные метки, поэтому networkD3 лучше интегрируется. Единственная проблема в том, что у меня проблемы с настройкой внешнего вида. Я хочу изменить цвет шрифта.

Воспроизводимый пример:

library(networkD3)
URL <- paste0('https://cdn.rawgit.com/christophergandrud/networkD3/',
              'master/JSONdata/energy.json')
energy <- jsonlite::fromJSON(URL)

# Plot
sankeyNetwork(Links = energy$links, Nodes = energy$nodes, Source = 'source',
              Target = 'target', Value = 'value', NodeID = 'name',
              units = 'TWh', fontSize = 12, nodeWidth = 30)

r networkd3
person Armando González Díaz    schedule 20.03.2020    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Текстовые элементы могут быть изменены моим добавлением onRender скрипта из пакета htmlwidgets. Эта функция позволяет запускать дополнительные функции javascript для выбора и изменения элементов с помощью D3. Структура функции:

p <- onRender(myplot,'function(el, x){ 
    ...
}')

Используя этот пример, вы можете выбрать метки, используя d3.selectAll (это возвращает каждый элемент; используйте d3.select() для одного элемента или только для первого элемента).

// Sankey selector for node labels
d3.selectAll(".node text")

Изменить цвет элемента <text> можно с помощью style('some prop', 'some value'). Например, допустим, мы хотим изменить текст на blue.

d3.selectAll(".node text").style("fill", "blue") // or hex, rgb, hsl, etc.

Используя приведенный выше пример, вот как вы могли бы это написать.

library(networkD3)
URL <- 'https://cdn.rawgit.com/christophergandrud/networkD3/master/JSONdata/energy.json'
energy <- jsonlite::fromJSON(URL)

# Plot
sankey <- sankeyNetwork(
  Links = energy$links, Nodes = energy$nodes, Source = 'source',
  Target = 'target', Value = 'value', NodeID = 'name',
  units = 'TWh', fontSize = 12, nodeWidth = 30
)

# render with js
sankey_rendered <- htmlwidgets::onRender(sankey,
  'function(el, x) {
    d3.selectAll(".node text")
        .style("fill", "blue");
  }'
)

# show
sankey_rendered

Если вы хотите сделать с метками больше (например, события мыши, щелчки), присвойте результат выбора D3 переменной.

var labels = d3.selectAll(".node text");
person dcruvolo    schedule 20.03.2020
comment
Этот способ действительно изменил цвет шрифта, но привел к потере кукол. Con Я получаю изменить цвет и сохранить всплывающие окна? - person Armando González Díaz; 21.03.2020
comment
Я немного запутался. Какие всплывающие окна вы имеете в виду? - person dcruvolo; 21.03.2020
comment
забудьте, мне просто нужно перезапустить сеанс r. Просто ярлыки, которые появляются при наведении мыши на узел или ссылку - person Armando González Díaz; 21.03.2020