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