Javascript D3家谱树缩放实现不'；行不通
基本上，我希望对我的家谱实现缩放行为，如本例所示 我已经在我创建svg画布的地方添加了调用函数，但它什么也不做，我是否遗漏了什么？提前谢谢 代码如下：Javascript D3家谱树缩放实现不'；行不通,javascript,d3.js,Javascript,D3.js,基本上，我希望对我的家谱实现缩放行为，如本例所示 我已经在我创建svg画布的地方添加了调用函数，但它什么也不做，我是否遗漏了什么？提前谢谢 代码如下： <!DOCTYPE html> <html> <head> <title>Fam tree</title> <script src="http://d3js.org/d3.v2.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>Fam tree</title>
<script src="http://d3js.org/d3.v2.js"></script>
<style>
body, html {
width: 100%;
height: 100%;
margin: 0;
}
svg {
position: absolute;
top: 0;
left: 0;
}
.link {
fill: none;
stroke: #ccc;
stroke-width: 1.5px;
}
div.tooltip {
position: absolute;
text-align: center;
width: 200px;
height: 30px;
padding: 8px;
font: 16px sans-serif;
font-weight: bold;
background: #ffff99;
border: solid 1px #aaa;
border-radius: 8px;
pointer-events: none;
background-color: rgba(0,128,128,0.5);
overflow: hidden;
transition: .5s ease
}
</style>
</head>
<body>
<div id="viz"></div>
<script type="text/javascript">
//JSON
var treeData = {"name" : "Steve", "lname" : "Forester", "children" : [
{"name" : "Anna", "lname" : "Woods" },
{"name" : "Boris", "lname" : "Vladimirov" },
{"name" : "Clint", "lname" : "Eastwood", "children": [
{"name" : "Sheldon", "lname" : "Morris" },
{"name" : "Bert", "lname" : "Jefferson" }
]}
]};
// Create a svg canvas
var vis = d3.select("#viz")
.append("svg")
.attr("width", "1500")
.attr("height", "1000")
.call(d3.behavior.zoom().on("zoom", function () {
svg.attr("transform", "translate(" + d3.event.translate + ")" + " scale(" + d3.event.scale + ")")
}))
.append("g")
.attr("transform", "translate(100, 100)"); // shift everything to the right
// Add tooltip div
var div = d3.select("body").append("div")
.attr("class", "tooltip")
.style("opacity", 1e-6);
// Create a tree "canvas"
var tree = d3.layout.tree()
.size([1200, 500]);
var diagonal = d3.svg.diagonal();
// Preparing the data for the tree layout, convert data into an array of nodes
var nodes = tree.nodes(treeData);
// Create an array with all the links
var links = tree.links(nodes);
var link = vis.selectAll("pathlink")
.data(links)
.enter().append("svg:path")
.attr("class", "link")
.attr("d", diagonal)
var node = vis.selectAll("g.node")
.data(nodes)
.enter().append("svg:g")
.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
// Hexagon img
node.append("svg:image")
.attr("xlink:href", "prva.png")
.attr("width", 100)
.attr("height", 100)
.attr("x", -50)
.attr("y", -30)
.on("mouseover", mouseover)
.on("mousemove", function(d){mousemove(d);})
.on("mouseout", mouseout)
.attr("fill","red")
.attr("r", 5.5);
function mouseover() {
div.transition()
.duration(300)
.style("opacity", 1);
d3.select(this).attr("xlink:href", "vtora.png");
}
function mousemove(d) {
div
.text(" Name:" + ' ' + d.name + ' ' + d.lname)
.style("left", (d3.event.pageX ) + "px")
.style("top", (d3.event.pageY) + "px");
}
function mouseout() {
div.transition()
.duration(300)
.style("opacity", 1e-6);
d3.select(this).attr("xlink:href", "prva.png");
}
</script>
</body>
</html>
家谱树
正文，html{
宽度：100%；
身高：100%；
保证金：0；
}
svg{
位置：绝对位置；
排名：0；
左：0；
}
.链接{
填充：无；
冲程：#ccc；
笔划宽度：1.5px；
}
分区工具提示{
位置：绝对位置；
文本对齐：居中；
宽度：200px；
高度：30px；
填充：8px；
字体：16px无衬线；
字体大小：粗体；
背景:#ffff99；
边框：实心1px#aaa；
边界半径：8px；
指针事件：无；
背景色：rgba（0128128,0.5）；
溢出：隐藏；
过渡：.5s轻松
}
//JSON
var treeData={“name”：“Steve”，“lname”：“Forester”，“children”：[
{“姓名”：“安娜”，“名字”：“伍兹”}，
{“姓名”：“鲍里斯”，“名字”：“弗拉基米罗夫”}，
{“姓名”：“克林特”，“lname”：“伊斯特伍德”，“儿童”：[
{“姓名”：“谢尔顿”，“名字”：“莫里斯”}，
{“姓名”：“伯特”，“名字”：“杰斐逊”}
]}
]};
//创建svg画布
var vis=d3。选择（“即”）
.append（“svg”）
.attr（“宽度”、“1500”）
.attr（“高度”、“1000”）
.call（d3.behavior.zoom（）.on（“zoom”，函数）（）{
attr（“transform”、“translate”（+d3.event.translate+”）+“scale”（+d3.event.scale+”）
}))
.附加（“g”）
.attr（“转换”、“翻译（100100）”）；//把所有东西移到右边
//添加工具提示div
var div=d3.选择（“主体”）.追加（“div”）
.attr（“类”、“工具提示”）
.样式（“不透明度”，1e-6）；
//创建树“画布”
var tree=d3.layout.tree（）
.尺寸（[1200500]）；
var diagonal=d3.svg.diagonal（）；
//准备树布局的数据，将数据转换为节点数组
var节点=tree.nodes（treeData）；
//创建一个包含所有链接的数组
var links=tree.links（节点）；
var link=vis.selectAll（“路径链接”）
.数据（链接）
.enter（）.append（“svg:path”）
.attr（“类”、“链接”）
.attr（“d”，对角线）
var node=vis.selectAll（“g.node”）
.数据（节点）
.enter（）.append（“svg:g”）
.attr（“transform”，函数（d）{return“translate”（“+d.x+”，“+d.y+”）”）；}）
//六边形img
node.append（“svg:image”）
.attr（“xlink:href”，“prva.png”）
.attr（“宽度”，100）
.attr（“高度”，100）
.attr（“x”，-50）
.attr（“y”，-30）
.on（“鼠标悬停”，鼠标悬停）
.on（“mousemove”，函数（d）{mousemove（d）；}）
.on（“mouseout”，mouseout）
.attr（“填充”、“红色”）
.attr（“r”，5.5）；
函数mouseover（）{
过渡部（）
.持续时间（300）
.样式（“不透明”，1）；
d3.选择（this.attr）（“xlink:href”，“vtora.png”）；
}
函数mousemove（d）{
div
.text（“名称：”+“”+d.Name+“”+d.lname）
.style（“左”（d3.event.pageX）+“px”）
.style（“top”，（d3.event.pageY）+“px”）；
}
函数mouseout（）{
过渡部（）
.持续时间（300）
.样式（“不透明度”，1e-6）；
d3.选择（this.attr）（“xlink:href”，“prva.png”）；
}
svg