如何实现 D3 层次视图
Posted
技术标签:
【中文标题】如何实现 D3 层次视图【英文标题】：How to implement D3 hierarchy view 【发布时间】：2015-08-25 21:01:41 【问题描述】：我正在尝试制作一个层次结构表，我想在 D3js.org 的帮助下在其中显示树结构，但它没有显示。你们谁能帮我解决我的问题。
我正在使用代码：https://gist.github.com/mbostock/1062288 链接中的 index.html 和 readme.json。
但是通过使用这两个文件和链接中给出的相同代码，我无法看到层次结构。 https://gist.github.com/mbostock/1062288.
// readme.json
"name": "flare",
"children": [
"name": "analytics",
"children": [
"name": "cluster",
"children": [
"name": "AgglomerativeCluster", "size": 3938,
"name": "CommunityStructure", "size": 3812,
"name": "HierarchicalCluster", "size": 6714,
"name": "MergeEdge", "size": 743
]
,
"name": "graph",
"children": [
"name": "BetweennessCentrality", "size": 3534,
"name": "LinkDistance", "size": 5731,
"name": "MaxFlowMinCut", "size": 7840,
"name": "ShortestPaths", "size": 5914,
"name": "SpanningTree", "size": 3416
]
,
"name": "optimization",
"children": [
"name": "AspectRatioBanker", "size": 7074
]
]
,
"name": "animate",
"children": [
"name": "Easing", "size": 17010,
"name": "FunctionSequence", "size": 5842,
"name": "interpolate",
"children": [
"name": "ArrayInterpolator", "size": 1983,
"name": "ColorInterpolator", "size": 2047,
"name": "DateInterpolator", "size": 1375,
"name": "Interpolator", "size": 8746,
"name": "MatrixInterpolator", "size": 2202,
"name": "NumberInterpolator", "size": 1382,
"name": "ObjectInterpolator", "size": 1629,
"name": "PointInterpolator", "size": 1675,
"name": "RectangleInterpolator", "size": 2042
]
,
"name": "ISchedulable", "size": 1041,
"name": "Parallel", "size": 5176,
"name": "Pause", "size": 449,
"name": "Scheduler", "size": 5593,
"name": "Sequence", "size": 5534,
"name": "Transition", "size": 9201,
"name": "Transitioner", "size": 19975,
"name": "TransitionEvent", "size": 1116,
"name": "Tween", "size": 6006
]
,
"name": "data",
"children": [
"name": "converters",
"children": [
"name": "Converters", "size": 721,
"name": "DelimitedTextConverter", "size": 4294,
"name": "GraphMLConverter", "size": 9800,
"name": "IDataConverter", "size": 1314,
"name": "JSONConverter", "size": 2220
]
,
"name": "DataField", "size": 1759,
"name": "DataSchema", "size": 2165,
"name": "DataSet", "size": 586,
"name": "DataSource", "size": 3331,
"name": "DataTable", "size": 772,
"name": "DataUtil", "size": 3322
]
,
"name": "display",
"children": [
"name": "DirtySprite", "size": 8833,
"name": "LineSprite", "size": 1732,
"name": "RectSprite", "size": 3623,
"name": "TextSprite", "size": 10066
]
,
"name": "flex",
"children": [
"name": "FlareVis", "size": 4116
]
,
"name": "physics",
"children": [
"name": "DragForce", "size": 1082,
"name": "GravityForce", "size": 1336,
"name": "IForce", "size": 319,
"name": "NBodyForce", "size": 10498,
"name": "Particle", "size": 2822,
"name": "Simulation", "size": 9983,
"name": "Spring", "size": 2213,
"name": "SpringForce", "size": 1681
]
,
"name": "query",
"children": [
"name": "AggregateExpression", "size": 1616,
"name": "And", "size": 1027,
"name": "Arithmetic", "size": 3891,
"name": "Average", "size": 891,
"name": "BinaryExpression", "size": 2893,
"name": "Comparison", "size": 5103,
"name": "CompositeExpression", "size": 3677,
"name": "Count", "size": 781,
"name": "DateUtil", "size": 4141,
"name": "Distinct", "size": 933,
"name": "Expression", "size": 5130,
"name": "ExpressionIterator", "size": 3617,
"name": "Fn", "size": 3240,
"name": "If", "size": 2732,
"name": "IsA", "size": 2039,
"name": "Literal", "size": 1214,
"name": "Match", "size": 3748,
"name": "Maximum", "size": 843,
"name": "methods",
"children": [
"name": "add", "size": 593,
"name": "and", "size": 330,
"name": "average", "size": 287,
"name": "count", "size": 277,
"name": "distinct", "size": 292,
"name": "div", "size": 595,
"name": "eq", "size": 594,
"name": "fn", "size": 460,
"name": "gt", "size": 603,
"name": "gte", "size": 625,
"name": "iff", "size": 748,
"name": "isa", "size": 461,
"name": "lt", "size": 597,
"name": "lte", "size": 619,
"name": "max", "size": 283,
"name": "min", "size": 283,
"name": "mod", "size": 591,
"name": "mul", "size": 603,
"name": "neq", "size": 599,
"name": "not", "size": 386,
"name": "or", "size": 323,
"name": "orderby", "size": 307,
"name": "range", "size": 772,
"name": "select", "size": 296,
"name": "stddev", "size": 363,
"name": "sub", "size": 600,
"name": "sum", "size": 280,
"name": "update", "size": 307,
"name": "variance", "size": 335,
"name": "where", "size": 299,
"name": "xor", "size": 354,
"name": "_", "size": 264
]
,
"name": "Minimum", "size": 843,
"name": "Not", "size": 1554,
"name": "Or", "size": 970,
"name": "Query", "size": 13896,
"name": "Range", "size": 1594,
"name": "StringUtil", "size": 4130,
"name": "Sum", "size": 791,
"name": "Variable", "size": 1124,
"name": "Variance", "size": 1876,
"name": "Xor", "size": 1101
]
,
"name": "scale",
"children": [
"name": "IScaleMap", "size": 2105,
"name": "LinearScale", "size": 1316,
"name": "LogScale", "size": 3151,
"name": "OrdinalScale", "size": 3770,
"name": "QuantileScale", "size": 2435,
"name": "QuantitativeScale", "size": 4839,
"name": "RootScale", "size": 1756,
"name": "Scale", "size": 4268,
"name": "ScaleType", "size": 1821,
"name": "TimeScale", "size": 5833
]
,
"name": "util",
"children": [
"name": "Arrays", "size": 8258,
"name": "Colors", "size": 10001,
"name": "Dates", "size": 8217,
"name": "Displays", "size": 12555,
"name": "Filter", "size": 2324,
"name": "Geometry", "size": 10993,
"name": "heap",
"children": [
"name": "FibonacciHeap", "size": 9354,
"name": "HeapNode", "size": 1233
]
,
"name": "IEvaluable", "size": 335,
"name": "IPredicate", "size": 383,
"name": "IValueProxy", "size": 874,
"name": "math",
"children": [
"name": "DenseMatrix", "size": 3165,
"name": "IMatrix", "size": 2815,
"name": "SparseMatrix", "size": 3366
]
,
"name": "Maths", "size": 17705,
"name": "Orientation", "size": 1486,
"name": "palette",
"children": [
"name": "ColorPalette", "size": 6367,
"name": "Palette", "size": 1229,
"name": "ShapePalette", "size": 2059,
"name": "SizePalette", "size": 2291
]
,
"name": "Property", "size": 5559,
"name": "Shapes", "size": 19118,
"name": "Sort", "size": 6887,
"name": "Stats", "size": 6557,
"name": "Strings", "size": 22026
]
,
"name": "vis",
"children": [
"name": "axis",
"children": [
"name": "Axes", "size": 1302,
"name": "Axis", "size": 24593,
"name": "AxisGridLine", "size": 652,
"name": "AxisLabel", "size": 636,
"name": "CartesianAxes", "size": 6703
]
,
"name": "controls",
"children": [
"name": "AnchorControl", "size": 2138,
"name": "ClickControl", "size": 3824,
"name": "Control", "size": 1353,
"name": "ControlList", "size": 4665,
"name": "DragControl", "size": 2649,
"name": "ExpandControl", "size": 2832,
"name": "HoverControl", "size": 4896,
"name": "IControl", "size": 763,
"name": "PanZoomControl", "size": 5222,
"name": "SelectionControl", "size": 7862,
"name": "TooltipControl", "size": 8435
]
,
"name": "data",
"children": [
"name": "Data", "size": 20544,
"name": "DataList", "size": 19788,
"name": "DataSprite", "size": 10349,
"name": "EdgeSprite", "size": 3301,
"name": "NodeSprite", "size": 19382,
"name": "render",
"children": [
"name": "ArrowType", "size": 698,
"name": "EdgeRenderer", "size": 5569,
"name": "IRenderer", "size": 353,
"name": "ShapeRenderer", "size": 2247
]
,
"name": "ScaleBinding", "size": 11275,
"name": "Tree", "size": 7147,
"name": "TreeBuilder", "size": 9930
]
,
"name": "events",
"children": [
"name": "DataEvent", "size": 2313,
"name": "SelectionEvent", "size": 1880,
"name": "TooltipEvent", "size": 1701,
"name": "VisualizationEvent", "size": 1117
]
,
"name": "legend",
"children": [
"name": "Legend", "size": 20859,
"name": "LegendItem", "size": 4614,
"name": "LegendRange", "size": 10530
]
,
"name": "operator",
"children": [
"name": "distortion",
"children": [
"name": "BifocalDistortion", "size": 4461,
"name": "Distortion", "size": 6314,
"name": "FisheyeDistortion", "size": 3444
]
,
"name": "encoder",
"children": [
"name": "ColorEncoder", "size": 3179,
"name": "Encoder", "size": 4060,
"name": "PropertyEncoder", "size": 4138,
"name": "ShapeEncoder", "size": 1690,
"name": "SizeEncoder", "size": 1830
]
,
"name": "filter",
"children": [
"name": "FisheyeTreeFilter", "size": 5219,
"name": "GraphDistanceFilter", "size": 3165,
"name": "VisibilityFilter", "size": 3509
]
,
"name": "IOperator", "size": 1286,
"name": "label",
"children": [
"name": "Labeler", "size": 9956,
"name": "RadialLabeler", "size": 3899,
"name": "StackedAreaLabeler", "size": 3202
]
,
"name": "layout",
"children": [
"name": "AxisLayout", "size": 6725,
"name": "BundledEdgeRouter", "size": 3727,
"name": "CircleLayout", "size": 9317,
"name": "CirclePackingLayout", "size": 12003,
"name": "DendrogramLayout", "size": 4853,
"name": "ForceDirectedLayout", "size": 8411,
"name": "IcicleTreeLayout", "size": 4864,
"name": "IndentedTreeLayout", "size": 3174,
"name": "Layout", "size": 7881,
"name": "NodeLinkTreeLayout", "size": 12870,
"name": "PieLayout", "size": 2728,
"name": "RadialTreeLayout", "size": 12348,
"name": "RandomLayout", "size": 870,
"name": "StackedAreaLayout", "size": 9121,
"name": "TreeMapLayout", "size": 9191
]
,
"name": "Operator", "size": 2490,
"name": "OperatorList", "size": 5248,
"name": "OperatorSequence", "size": 4190,
"name": "OperatorSwitch", "size": 2581,
"name": "SortOperator", "size": 2023
]
,
"name": "Visualization", "size": 16540
]
]
<!DOCTYPE html>
<meta charset="utf-8">
<title>Force-Directed Graph</title>
<style>
.node
cursor: pointer;
stroke: #3182bd;
stroke-width: 1.5px;
.link
fill: none;
stroke: #9ecae1;
stroke-width: 1.5px;
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var width = 960,
height = 500,
root;
var force = d3.layout.force()
.size([width, height])
.on("tick", tick);
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
var link = svg.selectAll(".link"),
node = svg.selectAll(".node");
d3.json("readme.json", function(json)
root = json;
update();
);
function update()
var nodes = flatten(root),
links = d3.layout.tree().links(nodes);
// Restart the force layout.
force
.nodes(nodes)
.links(links)
.start();
// Update the links…
link = link.data(links, function(d) return d.target.id; );
// Exit any old links.
link.exit().remove();
// Enter any new links.
link.enter().insert("line", ".node")
.attr("class", "link")
.attr("x1", function(d) return d.source.x; )
.attr("y1", function(d) return d.source.y; )
.attr("x2", function(d) return d.target.x; )
.attr("y2", function(d) return d.target.y; );
// Update the nodes…
node = node.data(nodes, function(d) return d.id; ).style("fill", color);
// Exit any old nodes.
node.exit().remove();
// Enter any new nodes.
node.enter().append("circle")
.attr("class", "node")
.attr("cx", function(d) return d.x; )
.attr("cy", function(d) return d.y; )
.attr("r", function(d) return Math.sqrt(d.size) / 10 || 4.5; )
.style("fill", color)
.on("click", click)
.call(force.drag);
function tick()
link.attr("x1", function(d) return d.source.x; )
.attr("y1", function(d) return d.source.y; )
.attr("x2", function(d) return d.target.x; )
.attr("y2", function(d) return d.target.y; );
node.attr("cx", function(d) return d.x; )
.attr("cy", function(d) return d.y; );
// Color leaf nodes orange, and packages white or blue.
function color(d)
return d._children ? "#3182bd" : d.children ? "#c6dbef" : "#fd8d3c";
// Toggle children on click.
function click(d)
if (!d3.event.defaultPrevented)
if (d.children)
d._children = d.children;
d.children = null;
else
d.children = d._children;
d._children = null;
update();
// Returns a list of all nodes under the root.
function flatten(root)
var nodes = [], i = 0;
function recurse(node)
if (node.children) node.children.forEach(recurse);
if (!node.id) node.id = ++i;
nodes.push(node);
recurse(root);
return nodes;
</script>【问题讨论】：
已编辑.....现在您能帮我获得所需的输出吗？ 你的js控制台有没有显示错误？您是否在计算机上本地使用这些文件？ 你想如何运行它？如果你有一个 git 帐户，你可以分叉 gist，然后 redirect it to bl.ocks.org 运行它。您当然可以将自己修改过的代码和数据推送到您的 gist 并在 bl.ocks.org 中查看该更新。否则，您需要在您的 PC 上设置一个服务器堆栈，如 @jhinzmann 所述，从 localhost 运行。 是的，我在计算机本地使用文件，当我在 chrome 中运行它时什么都看不到。我想使用这种树形结构：当它成功运行时，在 GGTS 中使用 Grails 从 localhost 运行。 【参考方案1】：您可能正在本地使用计算机上的文件并使用 chrome 浏览它们。
d3.json(...) 通过 XMLHttpRequest 加载数据。在您的javascript console 中（如果您遇到 JavaScript 问题，您应该始终首先查看），您应该会收到类似 XMLHttpRequest cannot load file:///...../data.json. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource. 的错误消息
chrome 无法通过 ajax 加载本地文件。其他浏览器可能允许这样做。刚刚检查了 safari 和 firefox，两者都能胜任。
如果您想继续使用浏览器，您应该为您的系统寻找一个本地网络服务器。
【讨论】：
是的，你是对的，我在我的计算机上本地使用文件并使用 chrome 浏览它们。但是当我运行 index.html 文件时，我在 chrome 中没有得到任何东西，甚至没有任何错误。 你必须打开你的 JS 控制台。有关说明，请参阅here。 JS 错误显示在那里而不是在页面上。 很高兴能帮到你。由于您的问题已解决，请将我的回答标记为已接受以上是关于如何实现 D3 层次视图的主要内容，如果未能解决你的问题，请参考以下文章