D3力布图绘制--基本方法

本文主要结合案例记录使用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中文手册