Skip to content

Commit

Permalink
[feature] Show node labels only after a suitable zoom level #148
Browse files Browse the repository at this point in the history
Closes #148
  • Loading branch information
totallynotvaishnav authored Sep 21, 2022
1 parent 441c123 commit a83c2ee
Show file tree
Hide file tree
Showing 5 changed files with 51 additions and 13 deletions.
7 changes: 7 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -98,6 +98,13 @@ 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`.
In graph mode, the overlapping labels are hidden automatically when zooming.

- `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

Large diffs are not rendered by default.

10 changes: 4 additions & 6 deletions src/js/netjsongraph.config.js
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
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
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

0 comments on commit a83c2ee

Please sign in to comment.