树状图点击节点居中 d3.js@3.x

最新推荐文章于 2024-04-22 09:49:57 发布

冷色系微风爱丶

最新推荐文章于 2024-04-22 09:49:57 发布

阅读量997

点赞数 1

分类专栏： svg

本文链接：https://blog.csdn.net/czy279470138/article/details/93208945

版权

svg 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

v4以上的api 没搞懂


var width = document.getElementById("tree").offsetWidth;
var height = document.getElementById("tree").offsetHeight;

var zoom = d3.behavior.zoom().center([width, height]).scaleExtent([0.1, 100]).on("zoom", zoomed);//添加放大缩小事件

function zoomed() {
	svg.attr("transform",
		"translate(" + d3.event.translate + ")" +
		"scale(" + d3.event.scale + ")"
	);
}
var svg = d3.select("body").select("#tree").append("svg")
		.call(zoom)//给svg绑定zoom事件、
		.append("g")
		// .attr("transform", "translate(150,0)")
		.attr("transform", "translate(" + width / 4 + ","+ 0 +")")

	// zoom.translate([150,0])
	zoom.translate([width / 4,0])

点击事件中执行下面操作在vue中注意指向问题。


svg.attr('transform', 'translate(' + (width / 4 - d.y0) + ', ' + (height / 2 - d.x0) + ')')
zoom.translate([(width / 4 - d.y0), (height / 2 - d.x0)]).scale(1)

// 加了缩放以后但是他的距离又无法控制。
const a = zoom.scale()
svg.attr('transform', 'translate(' + (width / 4 - d.y0 * a) + ', ' + (height / 2 - d.x0 * a) + ') scale(' + a + ')')
zoom.translate([(width / 4 - d.y0 * a), (height / 2 - d.x0 * a)]).scale(a)