Adjust the font color of the legend text in forceNetwork within networkD3

When using the forceNetwork function from the networkD3 R package, is there a way to change the text color in the legend to white?

This is my code snippet:

library(networkD3)

forceNetwork(Links = subLinkList, Nodes = subNodes, 
             Source = "root", Target = "children", 
             Value = "linkValue", NodeID = "nodeName", 
             Nodesize = "nodeSize", Group = "nodeGroup", 
             colourScale = JS(colorScale), charge = -500, 
             opacity = 1, opacityNoHover = 1, fontSize = 25, 
             fontFamily = "Calibri",
             linkDistance = JS('function(){d3.select("body").style("background-color", "#144370");return 200;}'), 
             linkWidth = 3, linkColour = "white", 
             legend = TRUE, bounded = TRUE, zoom = TRUE)

I attempted this approach:

linkDistance = JS('function(){d3.select("body").style("background-color", "#144370").legend.text("fill", "white");return 200;}')
javascriptrd3.jshtmlwidgetsnetworkd3

Answer №1

this example showcases a more efficient way to incorporate custom JavaScript into the code, rather than overcrowding the linkDistance argument...

library(networkD3)
library(htmlwidgets)

subNodes <- 
  read.table(stringsAsFactors = FALSE, header = TRUE, text = "
  nodeName nodeGroup     nodeSize
  Bob      NorthAmerica  10
  Alice    NorthAmerica  10
  Tom      China         10
  John     Japan         10
  ")

subLinkList <-
  read.table(stringsAsFactors = FALSE, header = TRUE, text = "
  root  children  linkValue
  0     1         1
  0     2         1
  0     3         1
  ")

colorScale <- "d3.scaleOrdinal(d3.schemeCategory20);"

fn <- forceNetwork(Links = subLinkList, Nodes = subNodes, 
             Source = "root", Target = "children", 
             Value = "linkValue", NodeID = "nodeName", 
             Nodesize = "nodeSize", Group = "nodeGroup",
             colourScale = JS(colorScale),
             charge = -500, opacity = 1, opacityNoHover = 1, fontSize = 25,
             fontFamily = "Calibri", linkDistance = 200,
             linkWidth = 3, linkColour = "white",
             legend = TRUE, bounded = TRUE, zoom = TRUE)

htmlwidgets::onRender(
  fn,
  'function(el, x) { 
    d3.select("body").style("background-color", "#144370");
    d3.selectAll(".legend text").style("fill", "white");
  }'
)

https://i.sstatic.net/KgfRh.png

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Creating double the mesh in THREE.js by utilizing identical vectors as their position coordinates

Recently, I upgraded from r67 to r69 in ThreeJS and now facing issues with referencing the positions of objects to a single vector. Prior to the update, this code snippet worked fine: var vector = new THREE.Vector3(50, 50, 50); _Mesh1.position = vector; ...

javascriptthree.js

Obtain the URL of the parent window from a modal dialog using JavaScript

What is the proper syntax for obtaining the URL (specifically, the PATH) of the parent window from a modal dialog box in Internet Explorer. I have attempted several variations such as: window.opener.document.location window.opener.location this.opener.do ...

javascriptasp.nethtml

How can you determine if an API method call has completed in Angular and proceed to the next task?

Two methods are being used for api calls in my code. Method one is calling out method two and needs to wait for method two's api call to finish before continuing with its own process. I attempted to achieve this using the complete function inside a su ...

javascriptangulartypescript

When attempting to connect to http://localhost:8545/ using Web3.js, the network encountered an error with the message

I am currently working on setting up web3.js for a website in order to enable Ethereum authentication. However, I encountered the following error: web3-light.js:4327 OPTIONS http://localhost:8545/ net::ERR_CONNECTION_REFUSED HttpProvider.send @ web3- ...

javascriptnode.jsweb3js

Tips for creating high-definition images from canvas artwork at a large scale

I'm considering using three.js for my upcoming art project. My goal is to create graphics through code and then save them in high resolution, like 7000 x 7000 px or more, for printing purposes. While I have experience with Flash and vvvv for similar ...

javascriptthree.jswebgl

Issue with php and ajax causing loop malfunction

I'm currently working on building a simple USD to pounds converter using PHP and AJAX. While I know it would be simpler with jQuery, unfortunately, the use of jQuery is not allowed for this assignment. The problem I'm facing is that when I run th ...

javascriptphpajax

Implement a transition effect for when elements change size using the `.resizable().css` method

I attempted to incorporate a deceleration effect when resizing an element back to its original size using the resizable method. The slowdown effect should only trigger during the click event (when the "Click-me" button is pressed), not while manipulating ...

javascripthtmljquerycss

Determine the width of the window and adjust the positioning of jQuery UI tooltips accordingly

Struggling to adjust the jQuery UI tooltip position based on screen width, but can't seem to figure it out. Can someone assist me in detecting the browser's width and changing the tooltip position accordingly? [fiddle] $(function () { $(doc ...

javascriptjquerycssjquery-uitooltip

Display a JSX component based on a specific condition

As a newcomer to React, I am currently working on the navigation portion of my Navbar.js using the react-router-dom useLocation hook. I have successfully obtained the active path that leads to views and now I want to display custom text when a user reaches ...

javascriptreactjsjsxreact-router-dom

Tips for preventing unstyled content flash when updating CSS files dynamically

The following jQuery function is used to replace CSS files: function UpdateTheme(theme) { var links = $("link"); var _t = theme; $.each(links, function (i, link) { var _h = $(link).attr('href'); _updatedHr ...

javascriptjqueryhtmlcss

Troubleshooting Problem with Scrolling Sticky Element on iOS Devices

This is specifically for mobile devices I am facing an issue with a relative positioned element where it should become fixed to the top of the screen when the scroll position exceeds the top position of the element. However, in iOS, when scrolling, the f ...

javascriptjqueryiosios9sticky

Using Angular 4 to import an HTML file

I am trying to save test.svg in a component variable 'a' or svgicon.component.html. To achieve this, I have created the svgicon.component.ts file. However, it's not working. What steps should I take next? svgicon.component.ts import ...

javascriptangularsvg

In Internet Explorer 10, it is not possible to access the document.links using the link's id; it can only be accessed using the

Why does the following code work in FireFox 23.0.1 and Chrome 29, but not in IE 10? <!DOCTYPE html> <html> <head> <title></title> <script type="text/javascript"> function loadFile1(){ a ...

javascripthtml

How to import a JSON file in AngularJS using Node.js

I am currently working with NodeJS and AngularJS to handle some data. Within my Angular application, I am trying to access a JSON file and distribute its content into separate controllers. Right now, I am utilizing the http.get method within a controller ...

javascriptjsonnode.jsangularjs

Error message: "Root resolution error encountered". Need assistance in granting watchman access?

After setting up a react-native starter project, I was prompted to allow watchman access to my system's files. Unfortunately, I declined and now whenever I try to run the folder, I encounter the following error: Error: unable to resolve root /Users/ck ...

javascriptreactjsreact-nativewatchman

Encountering a Selenium StaleElementException when attempting to resubmit a form after filling it

I am currently working on automating the filling of a form in one of my Selenium scripts. The form consists of 4 text fields with the following HTML structure: <input class="class" id="id" name="name" value="" autocomplete="off" wtx-context="stuff" typ ...

javascriptjavaajaxformsselenium

Observing modifications in the $route object - Vue Router

I am currently working on a small CRM project. Within the login form, I have implemented a component that displays an alert message when the email or password entered is incorrect. Interestingly, even after correcting the information and logging out, the m ...

javascriptvue.jsvue-router

Using React Bootstrap, you can ensure that only a single collapse opens at a time when rendering it with a map function. This allows you to display

When a user clicks on the "View Tasks" button, I want to display the relevant tasks specific to that user. However, currently all React Bootstrap Collapse Components open up and show tasks for every user instead of just one. This issue arises because the o ...

javascriptreactjsreduxreact-bootstrap

Using THREE.js in the pre-render function

I am encountering difficulties with updating the positions of my enemies before rendering them. Instead of creating a separate update() function, I attempted to use an onBeforeRender() function attached to each enemy object. However, nothing seems to be ...

javascriptthree.jsrender

Diminish, then lead to a fresh page

I have encountered an issue with my code. The wrapper performs a fade out effect before redirecting the user to a URL. However, it only fades out once and I suspect this is due to the browser caching or loading the page quickly. Is there a way to ensure t ...

javascriptjquery