Code Monkey home page Code Monkey logo

topologicalgraph's Introduction

拓扑图可视化

使用了D3v4.js库 在给出的Curved Links例子上修改、增加功能。

使用方法:

localhost:port[/index.html]?proj.json

拓扑图界面内的操作方式和基本元素解释

图中可进行的操作

  1. 当点击节点时会隐藏或者显示该节点的ID,同时在Node properties显示出该节点的信息
  2. 当点击边时会在Link properties显示出该边的信息
  3. 在图中可通过滚轮放大缩小图片

按钮的使用

  1. 隐藏所有标签:即隐藏所有节点的信息
  2. 显示所有标签:即显示所有节点的信息
  3. 停止迭代拓扑图:停止拓扑图的迭代,再次点击继续迭代
  4. 保存为Json文件:将节点的信息保存到Json中
  5. 将svg另存为图片:将svg以图片的形式保存

Simulation properties

  1. Strength:节点间斥力的调节
  2. Distance:边长度的调节
  3. Iterations:迭代次数的调节

Note properties

  1. Node'ID:表示当前显示节点的ID
  2. Color:节点颜色的调节
  3. Radius:节点大小的调节

Link properties

  1. Link'ID:表示当前显示边的ID
  2. Color:边的颜色的调节
  3. Width:边的宽度的调节

修改日志:

  • 20170717增加了显示/隐藏节点标签功能。
  • 20170718增加了显示/隐藏全部节点标签功能、给边增加宽度和颜色的功能、视图缩放功能。
  • 20170719增加了以鼠标为中心的缩放功能、点击鼠标选中离点击位置最近的节点功能、边缘限制(点限制在svg的范围内)。
  • 20170720增加了链路长度、修改了边缘斥力(直接贴附边缘而不是给一个随机值)。
  • 20170721
    • 完成输入文件修改格式的问题(昨天修改格式之后图展不开,一直没找到问题,今早发现是由于link的起点必须用'source',终点必须用'target')。
    • 增加切换拓扑图功能(还有bug)。
  • 20170724
    • 手动暂停迭代固定拓扑
    • 完成切换拓扑图的功能(通过将文件名在url后给出,而不是在js函数参数中给出,每次切换刷新页面)
  • 20170725
    • 增加修改节点、边属性功能
    • 增加迭代次数控制
  • 20170726 基本完成所有要求
    • 更改修改节点、边属性功能(将表格改为滑动条)
    • 更改试图缩放功能(在svg下新建一个container标签,每次缩放container而不是整个svg,好处是放大时不会覆盖按钮,还自动实现了拖拽)
    • 增加修改Simulation属性功能(包括strength、distance 、iterations),同样是用滑动条实现改变
    • 增加保存节点坐标功能,由于js无法保存文件,因而将数据写成json格式打印到控制台
  • 20170728
    • 修改保存节点坐标功能:将节点坐标保存为文件的功能
  • 20170729
    • 增加将svg保存为图片的功能
  • 20170730
    • 整理代码,将其按功能切分为若干部分
    • 设置边的id,使点击的时候在滑动条上显示边id
    • 设置边的透明度
  • 20170731
    • 利用bootstrap优化整个拓扑图的显示效果
    • 整理README文档,解释页面内的具体使用方式
  • 20170801
    • 修改切换方式,当切换到低时在往下摁还是加载第一个文件,到顶时不再显示图像
    • 修改了文件命名方式,以0.json开始,向上增加
  • 20170802
    • 增加修改点/边透明度的功能
    • 增加固定点的功能,当鼠标左键点击点同时按住f键,进入固定点的模式,再次点击左键同时按住非f键退出  ### 当前效果图如下: img
       若是显示不了点我

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.