Skip to content
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.

Sign up for GitHub

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

[change] Show node labels only after a suitable zoom level #148 #165

Merged
merged 4 commits into from
Sep 21, 2022
Merged

[change] Show node labels only after a suitable zoom level #148 #165

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
c64fe75
[change] Show node labels only after a suitable zoom level #148
totallynotvaishnav Sep 20, 2022
6406edc
[docs] Update readme
totallynotvaishnav Sep 20, 2022
4174188
[docs] Improve readme
totallynotvaishnav Sep 21, 2022
6d6bbe0
[docs] Minor improvement
nemesifier Sep 21, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -98,6 +98,12 @@ NetJSON format used internally is based on [networkgraph](http://netjson.org/rfc

Whether to allow switching between graph and map render or not. You can also set it `true` to enable it.

- `showLabelsAtZoomLevel`

**Default**: `7`

The zoom level at which the labels are shown. This only works when `render` is set to `map`.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please let's clarify how it currently works on the logical map.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍


- `dealDataByWorker`

The url to the worker file if you want to deal the data by a worker.
Expand Down
2 changes: 1 addition & 1 deletion dist/netjsongraph.min.js
View file
Open in desktop

Large diffs are not rendered by default.

10 changes: 4 additions & 6 deletions src/js/netjsongraph.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@ const NetJSONGraphDefaultConfig = {
svgRender: false,
switchMode: false,
showMetaOnNarrowScreens: false,
showLabelsAtZoomLevel: 7,
echartsOption: {
aria: {
show: true,
Expand Down Expand Up @@ -65,6 +66,9 @@ const NetJSONGraphDefaultConfig = {
color: "#fff",
position: "top",
},
labelLayout: {
hideOverlap: true,
},
force: {
gravity: 0.1,
edgeLength: [20, 60],
Expand Down Expand Up @@ -101,9 +105,6 @@ const NetJSONGraphDefaultConfig = {
series: [
{
zoom: 0.7,
labelLayout: {
hideOverlap: true,
},
},
],
toolbox: {
Expand All @@ -119,9 +120,6 @@ const NetJSONGraphDefaultConfig = {
series: [
{
zoom: 1,
labelLayout: {
hideOverlap: false,
},
},
],
toolbox: {
Expand Down
36 changes: 36 additions & 0 deletions src/js/netjsongraph.render.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -356,6 +356,42 @@ class NetJSONGraphRender {
);
}

if (self.leaflet.getZoom() < self.config.showLabelsAtZoomLevel) {
self.echarts.setOption({
series: [
{
label: {
show: false,
},
},
],
});
}

self.leaflet.on("zoomend", () => {
if (self.leaflet.getZoom() >= self.config.showLabelsAtZoomLevel) {
self.echarts.setOption({
series: [
{
label: {
show: true,
},
},
],
});
} else {
self.echarts.setOption({
series: [
{
label: {
show: false,
},
},
],
});
}
});

self.event.emit("onLoad");
self.event.emit("onReady");
self.event.emit("renderArray");
Expand Down
9 changes: 3 additions & 6 deletions test/netjsongraph.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,9 @@ describe("NetJSONGraph Specification", () => {
color: "#fff",
position: "top",
},
labelLayout: {
hideOverlap: true,
},
force: {
gravity: 0.1,
edgeLength: [20, 60],
Expand Down Expand Up @@ -68,9 +71,6 @@ describe("NetJSONGraph Specification", () => {
series: [
{
zoom: 0.7,
labelLayout: {
hideOverlap: true,
},
},
],
toolbox: {
Expand All @@ -86,9 +86,6 @@ describe("NetJSONGraph Specification", () => {
series: [
{
zoom: 1,
labelLayout: {
hideOverlap: false,
},
},
],
toolbox: {
Expand Down