D3.js-绘制力布图的基本方法

本文主要结合案例记录使用D3.js绘制力布图的基本方法

样例显示

D3.js-绘制力布图的基本方法

基本配置

      this.force = d3.layout
        .force() 
        .size([this.width, this.height])
        .linkDistance(function(d) {
          return 100;
        }) 
        .linkStrength(0.2)
        .friction(0.5)
        .charge(-1500);
  • d3.layout.force() :构造一个新的力导向布局

  • size([width,height]) :布局图的大小

  • linkStrength:连接线的连接强度

  • linkDistance([distance]) :连接线的连接距离,默认20,可以是数值或函数

  • friction:摩擦系数,可以使刚开始进入的速度衰减

  • charge : 节点间的电荷强度,默认-30,负值表示排斥,正值表示吸引,该参数决定是排斥还是吸引,数值越小越互相排斥

事件绑定

// 事件绑定
      this.force
        .on("tick", that.tick)
        .drag()
        .on("dragstart", function(d, e, o) {
          // 拖动前事件
          ......
        })
        .on("drag", function(d, e, o) {
          // 拖动中事件
          ......
        })
        .on("dragend", function(d, e, o) {
         // 拖动后事件
         ......
        });
  • tick:初始化及迭代过程中行为操作,监听节拍事件来更新节点和链接的显示位置

  • drag:绑定一个行为允许交互式拖动

绘制SVG

     // 绘制SVG
      let svg = d3
        .select(".model-svg-force")
        .append("svg")
        .attr("class", "svg-container")
        .attr("width", this.width)
        .attr("height", this.height)
        .on("click", function(d) {
          // 点击事件绑定
          ......
        });

d3 允许类似jquery的链式操作,可以筛选出元素,赋值属性等

  • select:选择dom元素

  • append:插入dom元素

  • attr:属性赋值

  • on:事件绑定

缩放

   // zoom的设置
   let zoom = d3.behavior.zoom().scaleExtent([0.5, 2]).on("zoom", zoomed);
   
    // 缩放的时候,将面板也同步缩放
    zoomed(e) {
      d3.selectAll(".g-wrapper").attr(
        "transform",
        "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")"
      );
    } 
   
   // 应用zoom
   d3.call(zoom)
  • d3.behavior.zoom():构造一个新的缩放行为,构造之后,可以使用call()将此行为应用于选择器;
  • d3.scaleExtent([]):指定缩放比例的允许范围
  • d3.event.scale:一个数值,当前的比例
  • d3.event.translate:一个数组,代表平移向量
  • on(type,listener):支持的事件类型有zoomstart(缩放开始)/zoom(缩放行为发生时)/zoomend(缩放行为结束时)

启动

  // 启动
  this.force
        .nodes(nodes)
        .links(links)
        .start();
  • nodes([nodes]):节点的信息:
    • x - 当前节点的x
    • y - 当前节点的y
    • px - 前一个节点的位置x
    • py - 前一个节点的位置y
    • fixed - 节点是否被锁定
    • weight - 节点权重
  • links([links]):连接线的信息:
    • source - 源节点
    • target - 目标节点
  • start():启动模拟;当首次创建布局时此方法必须被调用,然后分配节点和链接

其他方法

  • resume():重新启动定时器,在拖拽的时候会自动调用
  • transition():动画效果
  • duration(time):动画时间

更多内容请查看D3中文手册

上一篇:在树莓派上编译安装golang环境


下一篇:pod一直处于terminating状态的删除方法