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