Skip to content

[change] Show node labels only after hitting a certain zoom level #148

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
totallynotvaishnav opened this issue Jul 16, 2022 · 2 comments · May be fixed by #187
Open

[change] Show node labels only after hitting a certain zoom level #148

totallynotvaishnav opened this issue Jul 16, 2022 · 2 comments · May be fixed by #187
Labels
enhancement gsoc-idea Potential step of a GSoC project idea

Comments

@totallynotvaishnav
Copy link
Member

Currently, when we zoom out too much the labels of the nodes look cluttered and they are unreadable. We should allow the library to configure the level of zoom at which we want to start seeing node labels.
Screenshot 2022-07-16 at 10 30 06 PM

@nemesifier
Copy link
Member

I am reopening this because I found out how to do this:

graph.echarts.on('graphRoam', function(e) {
  console.log(graph.echarts.getOption().series[0].zoom);
});

@aikkku
Copy link

aikkku commented Mar 27, 2025

Hello guys, I am interested in contributing to solve this issue. Potential applicant for GSOC.

Spent some time to understand the way how code works and, honestly, could not find the implementation for this (mentioned by @nemesifier):

graph.echarts.on('graphRoam', function(e) {
console.log(graph.echarts.getOption().series[0].zoom);
});

However, I have noticed that in the example with netjsonmap.html, there is an attribute called zoom:

// set map initial state.
        mapOptions: {
          center: [46.86764405052012, 19.675998687744144],
          zoom: 5,
          nodeConfig: {
            label: {
              offset: [0, -10],
            },
          },
        },

So I think, it is possible to fix this issue by manipulating this zoom attribute in core files of netjsongraph.js. I wanted to make sure if this is the correct way of manipulations with zoom (code from src/js/netjsongraph.render.js):

self.leaflet.on("zoomend", () => {
        if (self.leaflet.getZoom() < self.config.disableClusteringAtLevel) {

Also, is the initial state for map from netjsonmap.html saved as config in NetJSONGraph class in netjsongraph.js:

class NetJSONGraph { 
  /**
   * @constructor
   *
   * @param {string} JSONParam - The NetJSON file parameter.
   * @param {Object} [config={}] - Configuration options for the graph.
   */
  constructor(JSONParam, config = {}) {

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement gsoc-idea Potential step of a GSoC project idea
Projects
Status: To do (general)
Development

Successfully merging a pull request may close this issue.

4 participants