Expanding Node Attributes in SigmaJs

I'm attempting to include additional information on nodes. I've imported JSON data to the graph in the following manner:

$.getJSON...
     s = new sigma({
        graph: json,
        settings: {
            enableHovering: false
      }

The JSON file contains more attributes than what Sigma is looking for when importing the graph. For example,

"nodes": [{"size": 3.104487111312395, "color": "rgb(181, 229, 127)", 
    "attributes": {"pp": "...jpg"}, "id":1,"x":1,"y":1,

However, Sigma does not import these additional attributes to the graph and only utilizes x, y, color, and size.

    <circle data-node-id="1" class="sigma-node" fill="rgb(85, 184, 141)"
 cx="357.70791360671683" cy="-151.86561654993392" r="1.8292755337720816"
 style="display: none;"></circle>

Is there a way to import extra attributes to Sigma nodes?

javascriptsigma.js

Answer №1

When using the SVG renderer in Sigma, only these attributes are considered:

  • color
  • id
  • x
  • y
  • size

You can refer to this link for more information: https://example.com/svg-documentation

If you require additional data in your SVG object, you have a couple of options:

  • Override sigma.svg.nodes.def.js file with your customizations
  • Enhance your SVG post-generation with a simple JavaScript script: iterate through sigma's nodes array, select SVG elements by ID, and make necessary adjustments

Out of curiosity, may I ask why you are interested in performing this task?

Cheers!

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

Tips for dynamically validating a Django form field as it is being typed

Is there a way to validate a Django form field as the user types? For instance, I want to check if a username already exists in the database. def clean_username(self): username = self.cleaned_data['username'] if User.objects.filter(user ...

javascriptdjangodjango-forms

Steps to Hide a Material-UI FilledInput

Trying to format a FilledInput Material-ui component to show currency using the following package: https://www.npmjs.com/package/react-currency-format Various attempts have been made, but none seem to be successful. A codesandbox showcasing the issue has ...

javascriptreactjsmaterial-ui

Monitor the change in FileReader().readyState using AngularJS

Below is the AngularJS code I have written to read a local file. var files = document.getElementById("file"); files.addEventListener("change", handleFile, false); function handleFile(event) { SpinnerService.upload(); // Display loading spinner ...

javascriptangularjs

Discovering ways to align specific attributes of objects or target specific components within arrays

I am trying to compare objects with specific properties or arrays with certain elements using the following code snippet: However, I encountered a compilation error. Can anyone help me troubleshoot this issue? type Pos = [number, number] type STAR = &quo ...

javascripttypescript

What is preventing the bundling of my CSS into the application?

I'm facing an issue while setting up a new project using vue.js, scss, and webpack (with express.js on the server side and TypeScript). I copied over the configurations from a previous project where everything was working fine. According to my underst ...

javascriptnode.jsvue.jswebpacksass

When the page is reloaded, the computed property in Vue.js (vuex) returns undefined due to the hardcoded array of objects data stored in vuex

I am facing an issue in my Vue shoe shop project where I am encountering 'undefined' error upon page reload while trying to access a getter through a computed property in the ShoeDetail component. My Vuex state contains hardcoded array of objects ...

javascriptvue.jsvuex

Hide an Angular button when a page is loaded, depending on the information found in a table

How can I hide the Submit button in a table row if a certain condition is met based on information from the database? I attempted to create a function that returns true or false, but it ends up crashing my program because it runs continuously. I also trie ...

javascripthtmlangularjs

Is there a way to pass a c struct pointer into javascript using ffi?

I need help passing a pointer to a struct to a method in nodejs using ffi. I am encountering an error where the type of the JavaScript struct I created cannot be determined. How can I resolve this issue? Previously, I was able to successfully implement si ...

javascriptcnode.jsffi

Simultaneous AJAX, animated page loader

My website takes 3 seconds to load due to multiple Synchronous AJAX requests. To enhance user experience, I would like to implement a loading page with an animated GIF. Once the Ajax requests are completed and the page is fully loaded, the loading page sh ...

javascriptjqueryajaxpageloadpage-loading-message

What is the best way to ensure the network is idle after clicking on an element in puppeteer?

Is there a way to wait for network idle after clicking on an element in puppeteer? const browser = await puppeteer.launch({headless: false}); await page.goto(url, {waitUntil: 'networkidle'}); await page.click('.to_cart'); //Clicking o ...

javascriptnode.jspuppeteer

Consistently encountering errors when trying to install npm

While attempting to install the Search git whodotheyserve. com application, I encountered a persistent error that shows up regardless of what troubleshooting steps I take. I have experimented with different versions of npm, all of which are successfully in ...

javascriptlinuxnode.jsfirefoxnpm

What is the most effective way to handle DOM events in Angular 8?

Looking to listen for the 'storage' event from the window in Angular 8. What is the recommended approach to achieving this in Angular? window.addEventListener('storage', () => { }); One method involves using Renderer2, but are ther ...

javascriptangulartypescriptevent-handling

When choosing an input field, it consistently yields an undefined value

Whenever I attempt to select an option in the input field, it should set the state value to the selected option. However, it keeps returning undefined. I am utilizing Semantic UI React Forms for input, but every time I select an option and submit, it retu ...

javascriptreactjssemantic-ui-react

Having trouble installing npm package in Angular project

After cloning my project from GitLab, I encountered an issue while trying to install the NPM packages. When I ran npm install, an error popped up: https://i.stack.imgur.com/WNT5s.png Upon checking the log file, I found the following error message: 3060 ...

javascriptangulartypescriptnpmnpm-install

Looping precisely five times in Vue3JS over an array and conditionally verifying each element within

After spending the past 2 hours searching through similar subjects on SO without success, I am turning to you for help. My goal is to create a scoreboard displaying results in the following format: John Doe 100 pts John Smith 50 pts No Name No Name No Na ...

javascriptarraysloopsvue.jsvuejs3

Is it possible to add a hover effect to this specific item using a PHP value?

I am working on a PHP post and my table is set up like this: while ($row = mysql_fetch_array($res, MYSQL_ASSOC)) { $id = $row['id']; $title1 = $row['title1']; $thumb = $row['thumb']; $link = $row['link&ap ...

javascriptphpjquerycss

bootstrap navigation bar collapsible menu

Struggling with making the hamburger menu appear on my friend's site. Spent hours trying to troubleshoot, but still can't figure out why it's only showing up as a red box and appearing on larger screens instead of just smaller devices. Frust ...

javascripthtmlcss

Ember - connecting to a JSON data source

Recently, I have been following a tutorial/example from codeschool and everything is going well. However, the example code includes the line: App.ApplicationAdapter = DS.FixtureAdapter.extend(); Now, I want to maintain all the existing functionality but ...

javascriptjsonember.js

The style of the button label does not persist when onChange occurs

Encountered an interesting issue here. There is a button designed for selection purposes, similar to a select item. Here's the code snippet: <button class="btn btn-primary dropdown-toggle" style="width: 166%;" type="button" id="dropdownMe ...

javascriptjqueryhtmlcssstyles

Passport.socket.io cannot resolve the issue of a missing session

The Issue I am facing a problem with the failed connection to socket.io: No session found using passport.socketio.js and I am unable to identify the root cause. Despite checking similar posts, the configuration seems fine to me. However, it appears that ...

javascriptnode.jsexpresswebsocketsocket.io