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中文手册

巴特西

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

样例显示

基本配置

事件绑定

绘制SVG

缩放

启动

其他方法

最新文章

热门文章