帮酷LOGO
  • 显示原文与译文双语对照的内容
文章标签:network  BASE  Visualizer  vis  
NetJSON NetworkGraph visualizer based on d3.js

  • 源代码名称:netjsongraph.js
  • 源代码网址:http://www.github.com/netjson/netjsongraph.js
  • netjsongraph.js源代码文档
  • netjsongraph.js源代码下载
  • Git URL:
    git://www.github.com/netjson/netjsongraph.js.git
  • Git Clone代码到本地:
    git clone http://www.github.com/netjson/netjsongraph.js
  • Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/netjson/netjsongraph.js
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
  • netjsongraph.js

    https://raw.githubusercontent.com/interop-dev/netjsongraph.js/master/docs/netjsongraph-default.png

    利用 d3.js 插件的强大功能,使用NetJSONNetworkGraph 格式来可视化网络拓扑。

    构建强大且互操作的可视化效果而不会失去灵活性 !

    这个库还处于阶段,反馈和贡献非常欢迎

    例如:

    安装

    # install via yarnyarn add netjsongraph.js --save# or install via npmnpm install netjsongraph.js --save

    命令行参数

    netjsongraph.js 接受两个参数

    • url ( 需要,字符串): 获取JSON数据的URL
    • options ( 可选,对象): 下面描述的自定义选项
    • el: 容器元素,默认为 "body"
    • metadata: 是否显示 NetJSONNetworkGraph 元数据,默认为 true
    • defaultStyle: 是否使用默认样式,默认为 true
    • scaleExtent: 查看 d3缩放 scaleExtent,默认为 [0.25, 5]
    • charge: 查看 d3缩放电荷,默认值为 -130
    • linkDistance: 查看 d3缩放 linkDistance,默认为 50
    • linkStrength: 查看 d3缩放 linkStrength,默认为 0.2
    • friction: 查看 d3缩放摩擦,默认值为 0.9
    • chargeDistance: 查看 d3缩放 chargeDistance,默认为 Infinity
    • theta: 查看 d3缩放 θ,默认值为 0.8
    • gravity: 查看 d3缩放重力,默认值为 0.1
    • nodeClassProperty: 如果指定,节点将有一个依赖于特定 NetJSON node 属性值的附加CSS类。
    • linkClassProperty: 如果指定,链接将具有一个依赖于特定NetJSON链接属性值的附加CSS类。
    • circleRadius: 圆的半径( 节点),defalts到 8
    • labelDx: 图 0 中 node 标签的SVG dx ( x 轴的距离) 属性
    • labelDy: 图中 node 标签的SVG ( y 轴的距离) 属性
    • onInit: 在初始化时执行回调函数,参数: urloptions
    • onLoad: 在加载数据后执行的回调函数,参数: urloptions
    • onEnd: 当初始动画完成时执行回调函数,参数: urloptions
    • linkDistanceFunc: 默认情况下,高密度区域有较长的链接,如果需要,可以以调整这里行为
    • redraw: 在平移和缩放时调用函数,如果需要,可以调整它
    • prepareData: 函数用于将 NetJSON NetworkGraph转换为内部使用的javascript数据,在大多数情况下,你不需要修改它
    • onClickNode: 当单击 node 时调用函数,如果需要,可以以自定义它
    • onClickLink: 在单击链接时调用函数,如果需要,可以以自定义它

    示例用法

    非常基本:

    <!DOCTYPE html>
    <html>
     <head>
     <linkhref="src/netjsongraph.css"rel="stylesheet">
     <!-- theme can be easily customized via css --> <linkhref="src/netjsongraph-theme.css"rel="stylesheet">
     </head>
     <body>
     <scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
     <scriptsrc="src/netjsongraph.js"></script>
     <script>d3.netJsonGraph("netjson.json");</script>
     </body>
    </html>

    在容器中显示图形:

    <!DOCTYPE html>
    <html>
    <head>
     <metacharset="utf-8">
     <linkhref="src/netjsongraph.css"rel="stylesheet">
     <!-- theme can be easily customized via css --> <linkhref="src/netjsongraph-theme.css"rel="stylesheet">
     <styletype="text/css">body {font-family: Arial, sans-serif;font-size: 13px; }#network-graph{width: 1000px;height: 800px;margin: 0auto;border: 1pxsolid#ccc; }</style>
    </head>
    <body>
     <divid="network-graph"></div>
     <scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
     <scriptsrc="src/netjsongraph.js"></script>
     <script>d3.netJsonGraph("netjson.json", { el:"#network-graph" });</script>
    </body>
    </html>

    样式

    库带有默认主题和默认样式( 颜色),可以以通过传递选项 defaultStyle: false 来禁用它,并定义你自己的CSS规则。

    以下是如何显示绿色链接和深绿色节点的fulle示例:

    <!DOCTYPE html>
    <html>
    <head>
     <metacharset="utf-8">
     <linkhref="src/netjsongraph.css"rel="stylesheet">
     <!-- custom theme example --> <styletype="text/css">body {font-family: Arial, sans-serif;font-size: 13px; }.njg-overlay{width: auto;height: auto;min-width: 200px;max-width: 400px;border: 1pxsolid#000;border-radius: 2px;background: rgba(0, 0, 0, 0.7);top: 10px;right: 10px;padding: 015px;font-family: Arial, sans-serif;font-size: 14px;color: #fff }.njg-node {fill: #008000;fill-opacity: 0.8;stroke: #008000;stroke-width: 1px;cursor: pointer; }.njg-node:hover,.njg-node.njg-open{fill-opacity: 1; }.njg-link {stroke: #00ff00;stroke-width: 2;stroke-opacity: .5;cursor: pointer; }.njg-link:hover,.njg-link.njg-open{stroke-width: 3;stroke-opacity: 1 }</style>
    </head>
    <body>
     <scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.12/d3.min.js"></script>
     <scriptsrc="src/netjsongraph.js"></script>
     <script>d3.netJsonGraph("netjson.json", { defaultStyle:false });</script>
    </body>
    </html>

    • fork !
    • 创建你的功能分支:git checkout -b my-new-feature
    • 提交更改:git提交 -am'添加一些特性"'
    • 推送到分支:git push 原点 my-new-feature
    • 提交请求请求:d

    许可证

    BSD 3-Clause 许可证。



    文章标签:BASE  vis  network  Visualizer  

    Copyright © 2011 HelpLib All rights reserved.    知识分享协议 京ICP备05059198号-3  |  如果智培  |  酷兔英语