我试图重写上面这个例子的一部分,以便在我的代码中使用,特别是这篇文章:
function centerNode(source) {
scale = zoomListener.scale();
x = -source.y0;
y = -source.x0;
x = x * scale + viewerWidth / 2;
y = y * scale + viewerHeight / 2;
d3.select('g').transition()
.duration(duration)
.attr("transform", "translate(" + x + "," + y + ")scale(" + scale + ")");
zoomListener.scale(scale);
zoomListener.translate([x, y]);
}
但是我因为v4包已经改变了很多而陷入困境.我写了我的zoomListener函数
var zoomListener = d3.zoom()
.scaleExtent([0.3,2])
.on("zoom", zoomed);
function zoomed() {
transform = d3.event.transform;
console.log(d3.event);
svg.attr("transform", transform);
}
function centerNode(source){
t = transform;
console.log(t);
x = t.x*t.k; //I …如果您使用下面的可折叠树,您将看到当您到达树的末尾,并展开并折叠节点时,线条正在做一些古怪的东西,我不完全确定是什么驱使行为或我的重写的输入链接的描述在这里完全是大错特错.我使用了平面数据结构并使用分层将其转换为树形布局.到目前为止唯一的问题是线路转换...任何想法？
var data = [{
"name": "Hazer 5000",
"parent": "CFO",
"img": "https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-342/stephen.jpg"
}, {
"name": "Employee 1",
"parent": "Hazer 5000",
"img": "https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-342/cory.jpg"
}, {
"name": "Analytics Area",
"parent": "Hazer 5000",
"img": "https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-342/matt.jpg"
}, {
"name": "Employee 2",
"parent": "Hazer 5000",
"img": "https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-342/XinheZhang.jpg"
}, {
"name": "Employee 3",
"parent": "Hazer 5000",
"img": "https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-342/craig.jpg"
}, {
"name": "Employee 4",
"parent": "Hazer 5000",
"img": "https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-342/youri.jpg"
}, {
"name": "Intern 1",
"parent": "Analytics Area",
"img": ""
}, {
"name": "Inter 2",
"parent": …我尝试使用最新版本的d3.js 模仿这个可折叠的树,但是我遇到了一些问题.
nodeEnter代码的一部分执行得很好,但无论出于何种原因nodeUpdate,代码的转换部分都不会执行.我查看控制台以确保它不仅仅是一个可见性问题,我没有错误,没有...坐标保持与它们由nodeEnter代码部分启动时相同.我唯一的猜测是,新版本的d3.js发生了变化,我遗漏了一些东西......
var t = d3.transition()
.duration(750)
.ease(d3.easeLinear);
var tree = d3.tree()
.size([height, width]);
function updateDisplay(source){
var treeData = tree(root).descendants(),
linkData = treeData.slice(1);
treeData.forEach(function(d) {
/*Normalize for fixed-depth between levels, so that y value
** stays the same through transition as opposed to being
** an even division of the svg width. */
d.y = d.depth *180;
});
var node = svg.selectAll("g.node")
.data(treeData);
var nodeEnter = node.enter()
.append("g")
.attr("class", function(d) {return "node" …