Javascript 使用D3可视化决策树
下面我将使用D3.js可视化决策树 这是我的完整代码，完全基于上述教程。由于某种原因，树没有出现。如果有人能解释我做错了什么，我将不胜感激：Javascript 使用D3可视化决策树,javascript,d3.js,Javascript,D3.js,下面我将使用D3.js可视化决策树 这是我的完整代码，完全基于上述教程。由于某种原因，树没有出现。如果有人能解释我做错了什么，我将不胜感激： <!DOCTYPE html> <meta charset="utf-8"> <style> .node circle { fill: #999; } .node text { font: 10px sans-serif; } .node--internal circle { fill: #555; }
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.node circle {
fill: #999;
}
.node text {
font: 10px sans-serif;
}
.node--internal circle {
fill: #555;
}
.node--internal text {
text-shadow: 0 1px 0 #fff, 0 -1px 0 #fff, 1px 0 0 #fff, -1px 0 0 #fff;
}
.link {
fill: none;
stroke: #555;
stroke-opacity: 0.4;
stroke-width: 1.5px;
}
</style>
<svg width="960" height="2000"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
var treeData = {
name: "/",
contents: [
{
name: "Applications",
contents: [
{ name: "Mail.app" },
{ name: "iPhoto.app" },
{ name: "Keynote.app" },
{ name: "iTunes.app" },
{ name: "XCode.app" },
{ name: "Numbers.app" },
{ name: "Pages.app" }
]
},
{
name: "System",
contents: []
},
{
name: "Library",
contents: [
{
name: "Application Support",
contents: [
{ name: "Adobe" },
{ name: "Apple" },
{ name: "Google" },
{ name: "Microsoft" }
]
},
{
name: "Languages",
contents: [
{ name: "Ruby" },
{ name: "Python" },
{ name: "Javascript" },
{ name: "C#" }
]
},
{
name: "Developer",
contents: [
{ name: "4.2" },
{ name: "4.3" },
{ name: "5.0" },
{ name: "Documentation" }
]
}
]
},
{
name: "opt",
contents: []
},
{
name: "Users",
contents: [
{ name: "pavanpodila" },
{ name: "admin" },
{ name: "test-user" }
]
}
]
};
var tree = d3.layout.tree()
.sort(null)
.size([size.height, size.width - maxLabelLength*options.fontSize])
.children(function(d)
{
return (!d.contents || d.contents.length === 0) ? null : d.contents;
});
var nodes = tree.nodes(treeData);
var links = tree.links(nodes);
var layoutRoot = d3.select(containerName)
.append("svg:svg").attr("width", size.width).attr("height", size.height)
.append("svg:g")
.attr("class", "container")
.attr("transform", "translate(" + maxLabelLength + ",0)");
// Edges between nodes as a <path class="link" />
var link = d3.svg.diagonal()
.projection(function(d)
{
return [d.y, d.x];
});
layoutRoot.selectAll("path.link")
.data(links)
.enter()
.append("svg:path")
.attr("class", "link")
.attr("d", link);
/*
Nodes as
<g class="node">
<circle class="node-dot" />
<text />
</g>
*/
var nodeGroup = layoutRoot.selectAll("g.node")
.data(nodes)
.enter()
.append("svg:g")
.attr("class", "node")
.attr("transform", function(d)
{
return "translate(" + d.y + "," + d.x + ")";
});
nodeGroup.append("svg:circle")
.attr("class", "node-dot")
.attr("r", options.nodeRadius);
nodeGroup.append("svg:text")
.attr("text-anchor", function(d)
{
return d.contents ? "end" : "start";
})
.attr("dx", function(d)
{
var gap = 2 * options.nodeRadius;
return d.contents ? -gap : gap;
})
.attr("dy", 3)
.text(function(d)
{
return d.name;
});
</script>
.节点圆{
填写：#999；
}
.节点文本{
字体：10px无衬线；
}
.node—内圆{
填充：#555；
}
.node—内部文本{
文本阴影：0 1px0#fff，0-1px0#fff，1px0#fff，-1px0#fff；
}
.链接{
填充：无；
行程：555；
笔划不透明度：0.4；
笔划宽度：1.5px；
}
变量treeData={
名称：“/”，
内容：[
{
名称：“应用程序”，
内容：[
{name:“Mail.app”}，
{name:“iPhoto.app”}，
{name:“Keynote.app”}，
{name:“iTunes.app”}，
{name:“XCode.app”}，
{name:“number.app”}，
{name:“Pages.app”}
]
},
{
名称：“系统”，
目录：[]
},
{
名称：“图书馆”，
内容：[
{
名称：“应用程序支持”，
内容：[
{name:“Adobe”}，
{名称：“苹果”}，
{name:“谷歌”}，
{name:“Microsoft”}
]
},
{
名称：“语言”，
内容：[
{name:“Ruby”}，
{name:“Python”}，
{name:“Javascript”}，
{名称：“C#”}
]
},
{
名称：“开发商”，
内容：[
{名称：“4.2”}，
{名称：“4.3”}，
{name:“5.0”}，
{name:“文档”}
]
}
]
},
{
名称：“选择”，
目录：[]
},
{
名称：“用户”，
内容：[
{名称：“pavanpodila”}，
{name:“admin”}，
{name:“测试用户”}
]
}
]
};
var tree=d3.layout.tree（）
.sort（空）
.size（[size.height，size.width-maxLabelLength*options.fontSize]）
.儿童（功能（d）
{
返回（！d.contents | | d.contents.length==0）？null:d.contents；
});
var节点=tree.nodes（treeData）；
var links=tree.links（节点）；
var layoutRoot=d3.select（containerName）
.append（“svg:svg”）.attr（“width”，size.width）.attr（“height”，size.height）
.append（“svg:g”）
.attr（“类”、“容器”）
.attr（“transform”、“translate”（+maxLabelLength+”，0）”）；
//节点之间的边作为
var link=d3.svg.diagonal（）
.投影（功能（d）
{
返回[d.y，d.x]；
});
layoutRoot.selectAll（“path.link”）
.数据（链接）
.输入（）
.append（“svg:path”）
.attr（“类”、“链接”）
.attr（“d”，链接）；
/*
节点作为
*/
var nodeGroup=layoutRoot.selectAll（“g.node”）
.数据（节点）
.输入（）
.append（“svg:g”）
.attr（“类”、“节点”）
.attr（“转换”，函数（d）
{
返回“translate”（“+d.y+”，“+d.x+”）；
});
nodeGroup.append（“svg:circle”）
.attr（“类”、“节点点”）
.attr（“r”，options.nodeRadius）；
追加（“svg:text”）
.attr（“文本锚定”，函数（d）
{
返回d.内容？“结束”：“开始”；
})
.attr（“dx”，函数（d）
{
var gap=2*options.nodeRadius；
返回d.内容？-间隙：间隙；
})
.attr（“dy”，3）
.文本（功能（d）
{
返回d.name；
});
d3d3第107行，未捕获引用错误：未定义大小