插件描述：d3.js 3.x 生成svg 有提示框 可以鼠标移上复制文字 支持拖拽缩放 子节点太多不会重叠
更新时间：2019/6/28 下午5:45:42
更新说明：
点击节点居中
更新时间：2019/4/30 下午6:19:17
更新说明：
支持反方向 (四处，nodeEnter nodeUpdate nodeExit diagonal)
弹窗 兼容ie10 但是好像不兼容edge 没有亲测过，电脑没有ie。 (offsetX/offsetY 换成 layerX/layerY)
点击节点 以节点位置展示 不会失去焦点。(click 事件中 最后两句注释)
可以 qq 联系 279470138 d3.js 只弄过这个树状图 是 v3 关于兼容问题，我没看
采用的是本地的json 文件，调接口的没有整理，就没有上传。
https://blog.csdn.net/czy279470138/article/details/88419831
PREVIOUS:
NEXT:
如果需要在vue react 和 angular 中引入的话 我这个是d3 3.5.17版本的 npm install
[email protected] yarn add
[email protected] yarn 我没试过，如果有问题可以试试制定版本安装 yarn add
[email protected]
// 点击节点位置居中 不受缩放影响
const a = zoom.scale()
svg.attr('transform', 'translate(' + (width / 3 - d.y0 * a) + ', ' + (height / 2 - d.x0 * a) + ') scale(' + a + ')')
zoom.translate([(width / 3 - d.y0 * a), (height / 2 - d.x0 * a)]).scale(a)
.attr("id", "resolved")
.attr("markerUnits", "userSpaceOnUse")
.attr("viewBox", "0 -5 10 10") //坐标系的区域
.attr("refX", 0) //箭头坐标
.attr("refY", -1)
.attr("markerWidth", 12) //标识的大小
.attr("markerHeight", 12)
.attr("orient", "auto") //绘制方向，可设定为：auto（自动确认方向）和 角度值
.attr("stroke-width", 2) //箭头宽度
.append("path")
.attr("d", "M0,-5L10,0L0,5") //箭头的路径
.attr('fill', '#000000'); //箭头颜色
// (2-8) 增加新连接
link.enter().("path", "g")
.attr("class", "link")
.attr("d", function(d) {
var o = {
x: source.x0,
y: source.y0
return diagonal({
source: o,
target: o
.attr("marker-end", "url(#resolved)"); // path 引入箭头
第一个圆点也会移位，
if 判断一下
.attr('cx', function(d, i) {
console.log(i)
if (i !== 0) {
return 15
})
转自qq群中一位大佬的分享
// 点击节点 以当前节点位置居中 位置可以调试
// svg.attr('transform', 'translate(' + (width / 4 - d.y0) + ', ' + (height / 2 - d.x0) + ')')
// zoom.translate([(width / 4 - d.y0), (height / 2 - d.x0)])
反方向
// svg.attr('transform', 'translate(' + (width / 4 + d.y0) + ', ' + (height / 2 - d.x0) + ')')
// zoom.translate([(width / 4 + d.y0), (height / 2 - d.x0)])
update(d); // 重新渲染
svg.attr('transform', 'translate(' + (width / 4 - d.y0) + ', ' + (height / 2 - d.x0) + ')')
zoom.translate([(width / 4 - d.y0), (height / 2 - d.x0)])
