Javascript中的D3.JS树视图折叠问题

在这个链接中，我想在我的项目中实现一个树

但是，当你尝试它时，你会发现有一个崩溃问题，它不能正常工作

我不确定问题出在哪里，但我认为它在函数“pan”中

这是链接，请在页面上往下看

编辑

塌陷函数与上面的代码配合得很好，但我需要实现缩放。我试图在可缩放树中实现工作崩溃，但这太难了

有人能帮忙吗

var treeData=[{
“名称”：“顶级”，
“父项”：“null”，
“儿童”：[{
“名称”：“2级：A”，
“父级”：“顶级”，
“儿童”：[{
“姓名”：“人子”，
“父级”：“级别2:A”
},
{
“姓名”：“A的女儿”，
“父级”：“级别2:A”
}
]
},
{
“名称”：“2级：B级”，
“父级”：“顶级”
}
]
}];
//*************生成树形图*****************
var保证金={
前20名，
右:120,，
底数：20，
左：120
},
宽度=960-margin.right-margin.left，
高度=500-margin.top-margin.bottom；
var i=0，
持续时间=750，
根；
var tree=d3.layout.tree（）
.尺寸（[高度、宽度]）；
var diagonal=d3.svg.diagonal（）
.投影（功能（d）{
返回[d.y，d.x]；
});
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，宽度+边距。右侧+边距。左侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（“转换”、“平移”（+margin.left+）、“+margin.top+”）；
根=树数据[0]；
root.x0=高度/2；
root.y0=0；
更新（根）；
d3.选择（self.frameElement）.style（“高度”，“500px”）；
函数更新（源）{
//计算新的树布局。
var nodes=tree.nodes（root）.reverse（），
链接=树。链接（节点）；
//为固定深度进行规格化。
nodes.forEach（函数（d）{
d、 y=d.深度*180；
});
//更新节点…
var node=svg.selectAll（“g.node”）
.数据（节点、功能（d）{
返回d.id | |（d.id=++i）；
});
//在父节点的上一个位置输入任何新节点。
var nodeEnter=node.enter（）.append（“g”）
.attr（“类”、“节点”）
.attr（“转换”，函数（d）{
返回“translate”（“+source.y0+”，“+source.x0+”）；
})
。开启（“点击”，点击）；
nodeEnter.append（“圆”）
.attr（“r”，1e-6）
.样式（“填充”，功能（d）{
返回d.#儿童？“淡蓝色”：“fff”；
});
nodeEnter.append（“文本”）
.attr（“x”，函数（d）{
返回d.children | | d.| U儿童？-13:13；
})
.attr（“dy”，“.35em”）
.attr（“文本锚定”，函数（d）{
返回d.children | d.| u children？“结束”：“开始”；
})
.文本（功能（d）{
返回d.name；
})
.样式（“填充不透明度”，1e-6）；
//将节点转换到其新位置。
var nodeUpdate=node.transition（）
.持续时间（持续时间）
.attr（“转换”，函数（d）{
返回“translate”（“+d.y+”，“+d.x+”）；
});
节点更新。选择（“圆圈”）
.attr（“r”，10）
.样式（“填充”，功能（d）{
返回d.#儿童？“淡蓝色”：“fff”；
});
nodeUpdate.select（“文本”）
.样式（“填充不透明度”，1）；
//将退出节点转换到父节点的新位置。
var nodeExit=node.exit（）.transition（）
.持续时间（持续时间）
.attr（“转换”，函数（d）{
返回“translate”（“+source.y+”，“+source.x+”）；
})
.remove（）；
nodeExit.select（“圆”）
.attr（“r”，1e-6）；
nodeExit.select（“文本”）
.样式（“填充不透明度”，1e-6）；
//更新链接…
var link=svg.selectAll（“path.link”）
.数据（链接、功能（d）{
返回d.target.id；
});
//在父对象的上一个位置输入任何新链接。
link.enter（）插入（“路径”，“g”）
.attr（“类”、“链接”）
.attr（“d”，函数（d）{
变量o={
x:source.x0，
y:source.y0
};
返回对角线({
资料来源：o，
目标：o
});
});
//过渡链接到他们的新位置。
link.transition（）
.持续时间（持续时间）
.attr（“d”，对角线）；
//将退出节点转换到父节点的新位置。
link.exit（）.transition（）
.持续时间（持续时间）
.attr（“d”，函数（d）{
变量o={
x:source.x，
y:来源，y
};
返回对角线({
资料来源：o，
目标：o
});
})
.remove（）；
//将旧位置隐藏起来，以便过渡。
nodes.forEach（函数（d）{
d、 x0=d.x；
d、 y0=d.y；
});
}
//在单击时切换子项。
功能点击（d）{
如果（d.儿童）{
d、 _children=d.children；
d、 children=null；
}否则{
d、 儿童=d.\U儿童；
d、 _children=null；
}
更新（d）；
}

.node{
光标：指针；
}
.节点圆{
填充：#fff；
笔画：钢蓝；
笔画宽度：3px；
}
.节点文本{
字体：12px无衬线；
}
.链接{
填充：无；
冲程：#ccc；
笔画宽度：2px；
}

---

我找到了解决办法

您只需要更改此代码

var svg = d3.select("body").append("svg")
.attr("width", width + margin.right + margin.left)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var svg = d3.select("body").append("svg")
   .attr("width", width + margin.right + margin.left)
   .attr("height", height + margin.top + margin.bottom)
   .call(d3.behavior.zoom().on("zoom", function () {
       svg.attr("transform", "translate(" + d3.event.translate + ")" + " scale(" + 
       d3.event.scale + ")")
  }))
   .append("g")
   .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

遵守这一准则

var svg = d3.select("body").append("svg")
.attr("width", width + margin.right + margin.left)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var svg = d3.select("body").append("svg")
   .attr("width", width + margin.right + margin.left)
   .attr("height", height + margin.top + margin.bottom)
   .call(d3.behavior.zoom().on("zoom", function () {
       svg.attr("transform", "translate(" + d3.event.translate + ")" + " scale(" + 
       d3.event.scale + ")")
  }))
   .append("g")
   .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

你可以在这里测试

var treeData=[{
“名称”：“顶级”，
“父项”：“null”，
“儿童”：[{
“名称”：“2级：A”，
“父级”：“顶级”，
“儿童”：[{
“姓名”：“人子”，
“父级”：“级别2:A”
},
{
“姓名”：“A的女儿”，
“父级”：“级别2:A”
}
]
},
{
“名称”：“2级：B级”，
“父级”：“顶级”
}
]
}];
//*************生成树形图*****************
var保证金={
前20名，
右:120,，
底数：20，
左：120
},
宽度=960-margin.right-margin.left，
高度=500-margin.top-margin.bottom；
var i=0，
持续时间=750，
根；
var tree=d3.layout.tree（）
.尺寸（[高度、宽度]）；
var diagonal=d3.svg.diagonal（）
.投影（功能（d）{
返回[d.y，d.x]；
});
var svg=d3。选择（“bo