feat: semantic zoom - 保持文字图标大小恒定，放大时只改变节点间距#452
Open
wangpi26 wants to merge 1 commit intotirth8205:mainfrom
Open
feat: semantic zoom - 保持文字图标大小恒定，放大时只改变节点间距#452wangpi26 wants to merge 1 commit intotirth8205:mainfrom
wangpi26 wants to merge 1 commit intotirth8205:mainfrom
Conversation
实现语义缩放(semantic zoom)替代原有的几何缩放(geographic zoom):
- 添加 counterScale() 函数，缩放时对节点和标签施加反向缩放(1/k)
- 放大时节点间距拉大，但文字和图标保持屏幕恒定大小
- 边线粗细随缩放反调，保持视觉恒定
- 高亮关联边线粗细同样随缩放反调
- 修复 d3.select('svg') 选中 legend 内联 SVG 的问题，改为 d3.select('#graph-svg')
- 同时修改标准视图和社区视图两套模板
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
问题
当前图谱使用几何缩放(geographic zoom)：放大时所有元素等比放大，包括文字和图标。这导致放大后文字图标变得很大，而节点之间的间距比例不变，无法看清更多结构细节。节点密集时尤其不便。
修复内容
实现语义缩放(semantic zoom)：
counterScale()函数：缩放时对节点组和标签施加反向缩放1/k，使文字和图标保持屏幕上恒定大小stroke-width除以currentTransform.k，保持视觉恒定highlightConnected中所有stroke-width值都除以kk，保持视觉恒定d3.select("svg")bug：改为d3.select("#graph-svg")，避免选中 legend 内联 SVG标准视图和社区视图两套模板均做了相同改动。
效果
Closes #450