我正在进行角度应用.我想在下面的d3图表中添加,但是当我只是将Javascript插入我的控制器,样式到我的样式表中时,什么都没有出现.有人建议我,Angular和D3不是很好玩.
我已经附加了我的角度设置而没有添加d3对象.我想将它添加到workHistory Controller/Directive/View中.有关正确设置方法的建议是什么？谢谢!
的index.html
<!doctype html>
<html lang="en" ng-app="webApp">
<head>
<meta charset="utf-8">
<title>My Portfolio</title>
<!--Stylesheets -->
<link rel="stylesheet" href="styles/main.css"/>
<link rel="stylesheet" href="styles/d3.tree.css"/>
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/select2/3.5.0/select2.min.css"/>
<!--Libraries -->
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/angular-route/angular-route.min.js"></script>
<script src="bower_components/angular-loader/angular-loader.min.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/3.5.0/select2.min.js"></script>
<!--Module -->
<script src="scripts/modules/module.js"></script>
<script src="scripts/modules/d3.module.js"></script>
<!--Controllers -->
<script src="scripts/controllers/mainHeroController.js"></script>
<script src="scripts/controllers/workHistoryController.js"></script>
<!--Directives-->
<script src="scripts/directives/mainHero.directive.js"></script>
<script src="scripts/directives/mainNavbar.directive.js"></script>
<script src="scripts/directives/workHistory.directive.js"></script>
</head>
<!--Main Landing Page-->
<body>
<main-navbar></main-navbar>
<main-hero></main-hero>
<div id="container1" ng-controller="WorkHistoryController">
<h3 id="tree-title">Work History</h3>
<work-history chart-data="$scope.values"></work-history>
</div>
<div id="container2">
Container 2
</div>
</body>
</html>
workHistory.directive.js
(function()
{
'use strict';
angular
.module('webApp')
.directive('workHistory', workHistory);
function workHistory()
{
var directive =
{
restrict: 'E',
controller: 'WorkHistoryController',
controllerAs: 'workhistory',
scope: {},
templateUrl: './views/workHistory.html'
};
return directive;
}
})();
workHistoryController.js
(function()
{
'use strict'
angular
.module('webApp')
.controller('WorkHistoryController', WorkHistoryController);
WorkHistoryController.$inject = ['$scope'];
function WorkHistoryController($scope)
{
console.log($scope);
$scope.values = $scope.values || {};
$scope.values = {
"name": "Work History",
"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}
]
}
]
};
}
})();
workHistory.html
//insert d3 view here
的main.css
//insert d3 styles here
angular制作应用程序并在您的应用程序中使用非常简单d3。首先，您需要了解一些有关angular结构的知识。如您所知，您需要ng-app使用角度库，您可以在html或body标签中定义它。如果您想在指令之间共享数据或使用角度，services您需要角度控制器。在这种情况下，$scope控制器和指令之间共享。您必须使用的最后一个函数是指令。\n因此，根据这段话，让我们规范化您的代码。首先，你不应该定义一个指令css参数定义指令，只需将它们全部添加到文件中并将其注入主页或将它们插入到标签中<style>。\n正如我提到的指令，只需使用 byJavaScript。\n那么让我们实现角度应用程序：
var app = angular.module(\'App\');\nvar ctrl = app.controller("treeCrtl", ["$scope", function ($scope) { \n}]);\n这是两个函数，ng-app和角度控制器，这是指令。
ctrl.directive("workHistory", function () {\n return {\n restrict: \'E\',\n link: function link(scope, el, attr) {\n\n var div = d3.select("body")\n .append("div") // declare the tooltip div\n .attr("class", "tooltip")\n .style("opacity", 0);\n\n var margin = { top: 20, right: 120, bottom: 20, left: 120 },\n width = 960 - margin.right - margin.left,\n height = 800 - margin.top - margin.bottom;\n var i = 0,duration = 750,root,select2_data;\n var diameter = 960;\n var tree = d3.layout.tree()\n .size([height, width]);\n\n var diagonal = d3.svg.diagonal()\n .projection(function (d) { return [d.y, d.x]; });\n\n var svg = d3.select(el[0]).append("svg")\n .attr("width", width + margin.right + margin.left)\n .attr("height", height + margin.top + margin.bottom)\n .append("g")\n .attr("transform", "translate(" + margin.left + "," + margin.top + ")");\n\n //recursively collapse children\n function collapse(d) {\n if (d.children) {\n d._children = d.children;\n d._children.forEach(collapse);\n d.children = null;\n }\n }\n\n // Toggle children on click.\n function click(d) {\n if (d.children) {\n d._children = d.children;\n d.children = null;\n }\n else {\n d.children = d._children;\n d._children = null;\n }\n update(d);\n }\n\n function openPaths(paths) {\n for (var i = 0; i < paths.length; i++) {\n if (paths[i].id !== "1") {//i.e. not root\n paths[i].class = \'found\';\n if (paths[i]._children) { //if children are hidden: open them, otherwise: don\'t do anything\n paths[i].children = paths[i]._children;\n paths[i]._children = null;\n }\n update(paths[i]);\n }\n }\n }\n\n\n root = values;\n select2_data = extract_select2_data(values, [], 0)[1];//I know, not the prettiest...\n root.x0 = height / 2;\n root.y0 = 0;\n root.children.forEach(collapse);\n update(root);\n //init search box\n $("#search").select2({\n data: select2_data,\n containerCssClass: "search"\n });\n\n\n //attach search box listener\n $("#search").on("select2-selecting", function(e) {\n var paths = searchTree(root, e.object.text, []);\n if (typeof (paths) !== "undefined") {\n openPaths(paths);\n } else {\n alert(e.object.text + " not found!");\n }\n });\n\n d3.select(self.frameElement).style("height", "800px");\n\n function update(source) {\n // Compute the new tree layout.\n var nodes = tree.nodes(root).reverse(),\n links = tree.links(nodes);\n\n // Normalize for fixed-depth.\n nodes.forEach(function (d) { d.y = d.depth * 180; });\n\n // Update the nodes\xc3\xa2\xe2\x82\xac\xc2\xa6\n var node = svg.selectAll("g.node")\n .data(nodes, function (d) { return d.id || (d.id = ++i); });\n\n // Enter any new nodes at the parent\'s previous position.\n var nodeEnter = node.enter().append("g")\n .attr("class", "node")\n .attr("transform", function (d) { return "translate(" + source.y0 + "," + source.x0 + ")"; })\n .on("click", click);\n\n nodeEnter.append("circle")\n .attr("r", 1e-6)\n .style("fill", function (d) { return d._children ? "lightsteelblue" : "#fff"; });\n\n nodeEnter.append("text")\n .attr("x", function (d) { return d.children || d._children ? -10 : 10; })\n .attr("dy", ".35em")\n .attr("text-anchor", function (d) { return d.children || d._children ? "end" : "start"; })\n .text(function (d) { return d.name; })\n .style("fill-opacity", 1e-6);\n\n // Transition nodes to their new position.\n var nodeUpdate = node.transition()\n .duration(duration)\n .attr("transform", function (d) { return "translate(" + d.y + "," + d.x + ")"; });\n\n nodeUpdate.select("circle")\n .attr("r", 4.5)\n .style("fill", function (d) {\n if (d.class === "found") {\n return "#ff4136"; //red\n }\n else if (d._children) {\n return "lightsteelblue";\n }\n else {\n return "#fff";\n }\n })\n .style("stroke", function (d) {\n if (d.class === "found") {\n return "#ff4136"; //red\n }\n });\n\n nodeUpdate.select("text")\n .style("fill-opacity", 1);\n\n // Transition exiting nodes to the parent\'s new position.\n var nodeExit = node.exit().transition()\n .duration(duration)\n .attr("transform", function (d) { return "translate(" + source.y + "," + source.x + ")"; })\n .remove();\n\n nodeExit.select("circle")\n .attr("r", 1e-6);\n\n nodeExit.select("text")\n .style("fill-opacity", 1e-6);\n\n // Update the links\xc3\xa2\xe2\x82\xac\xc2\xa6\n var link = svg.selectAll("path.link")\n .data(links, function (d) { return d.target.id; });\n\n // Enter any new links at the parent\'s previous position.\n link.enter().insert("path", "g")\n .attr("class", "link")\n .attr("d", function (d) {\n var o = { x: source.x0, y: source.y0 };\n return diagonal({ source: o, target: o });\n });\n\n // Transition links to their new position.\n link.transition()\n .duration(duration)\n .attr("d", diagonal)\n .style("stroke", function (d) {\n if (d.target.class === "found") {\n return "#ff4136";\n }\n });\n\n // Transition exiting nodes to the parent\'s new position.\n link.exit().transition()\n .duration(duration)\n .attr("d", function (d) {\n var o = { x: source.x, y: source.y };\n return diagonal({ source: o, target: o });\n })\n .remove();\n\n // Stash the old positions for transition.\n nodes.forEach(function (d) {\n d.x0 = d.x;\n d.y0 = d.y;\n });\n }\n\n function searchTree(obj, search, path) {\n if (obj.name === search) { //if search is found return, add the object to the path and return it\n path.push(obj);\n return path;\n }\n else if (obj.children || obj._children) { //if children are collapsed d3 object will have them instantiated as _children\n var children = (obj.children) ? obj.children : obj._children;\n for (var i = 0; i < children.length; i++) {\n path.push(obj);// we assume this path is the right one\n var found = searchTree(children[i], search, path);\n if (found) {// we were right, this should return the bubbled-up path from the first if statement\n return found;\n }\n else {//we were wrong, remove this parent from the path and continue iterating\n path.pop();\n }\n }\n }\n else {//not the right object, return false so it will continue to iterate in the loop\n return false;\n }\n }\n\n function extract_select2_data(node, leaves, index) {\n if (node.children) {\n for (var i = 0; i < node.children.length; i++) {\n index = extract_select2_data(node.children[i], leaves, index)[0];\n }\n }\n else {\n leaves.push({ id: ++index, text: node.name });\n }\n return [index, leaves];\n }\n\n }\n }\n });\n有几点我不得不提：
\n\n1-如果您必须实现不同的指令，只需使用相同的格式和不同的名称即可。
\n\n2- 要将您的代码链接到指令标记，您必须使用这种类型的编码：\n d3.select(el[0])，注意el是链接函数参数。
3-如果您使用不同的目录flare.json替换此部分：
root = values;\nselect2_data = extract_select2_data(values, [], 0)[1];//I know, not the prettiest...\nroot.x0 = height / 2;\nroot.y0 = 0;\nroot.children.forEach(collapse);\n update(root);\n //init search box\n $("#search").select2({\n data: select2_data,\n containerCssClass: "search"\n });\n有了这个：
\n\nd3.json("flare.json", function(error,values){\n root = values;\n select2_data = extract_select2_data(values,[],0)[1];//I know, not the prettiest...\n root.x0 = height / 2;\n root.y0 = 0;\n root.children.forEach(collapse);\n update(root);\n //init search box\n $("#search").select2({\n data: select2_data,\n containerCssClass: "search"\n });\n });\n这是完整的代码：
\n\nJs部分：
\n\n var app = angular.module(\'App\');\n var ctrl = app.controller("treeCrtl", ["$scope", function ($scope) {\n\n }]);\n ctrl.directive("workHistory", function () {\n return {\n restrict: \'E\',\n link: function link(scope, el, attr) {\n\n var div = d3.select("body")\n .append("div") // declare the tooltip div\n .attr("class", "tooltip")\n .style("opacity", 0);\n\n var margin = { top: 20, right: 120, bottom: 20, left: 120 },\n width = 960 - margin.right - margin.left,\n height = 800 - margin.top - margin.bottom;\n var i = 0,duration = 750,root,select2_data;\n var diameter = 960;\n var tree = d3.layout.tree()\n .size([height, width]);\n\n var diagonal = d3.svg.diagonal()\n .projection(function (d) { return [d.y, d.x]; });\n\n var svg = d3.select(el[0]).append("svg")\n .attr("width", width + margin.right + margin.left)\n .attr("height", height + margin.top + margin.bottom)\n .append("g")\n .attr("transform", "translate(" + margin.left + "," + margin.top + ")");\n\n //recursively collapse children\n function collapse(d) {\n if (d.children) {\n d._children = d.children;\n d._children.forEach(collapse);\n d.children = null;\n }\n }\n\n // Toggle children on click.\n function click(d) {\n if (d.children) {\n d._children = d.children;\n d.children = null;\n }\n else {\n d.children = d._children;\n d._children = null;\n }\n update(d);\n }\n\n function openPaths(paths) {\n for (var i = 0; i < paths.length; i++) {\n if (paths[i].id !== "1") {//i.e. not root\n paths[i].class = \'found\';\n if (paths[i]._children) { //if children are hidden: open them, otherwise: don\'t do anything\n paths[i].children = paths[i]._children;\n paths[i]._children = null;\n }\n update(paths[i]);\n }\n }\n }\n\n root = values;\n //values is the flare.json \n select2_data = extract_select2_data(values, [], 0)[1];//I know, not the prettiest...\n root.x0 = height / 2;\n root.y0 = 0;\n root.children.forEach(collapse);\n update(root);\n //init search box\n $("#search").select2({\n data: select2_data,\n containerCssClass: "search"\n });\n\n //attach search box listener\n $("#search").on("select2-selecting", function(e) {\n var paths = searchTree(root, e.object.text, []);\n if (typeof (paths) !== "undefined") {\n openPaths(paths);\n } else {\n alert(e.object.text + " not found!");\n }\n });\n\n d3.select(self.frameElement).style("height", "800px");\n\n function update(source) {\n // Compute the new tree layout.\n var nodes = tree.nodes(root).reverse(),\n links = tree.links(nodes);\n\n // Normalize for fixed-depth.\n nodes.forEach(function (d) { d.y = d.depth * 180; });\n\n // Update the nodes\xc3\xa2\xe2\x82\xac\xc2\xa6\n var node = svg.selectAll("g.node")\n .data(nodes, function (d) { return d.id || (d.id = ++i); });\n\n // Enter any new nodes at the parent\'s previous position.\n var nodeEnter = node.enter().append("g")\n .attr("class", "node")\n .attr("transform", function (d) { return "translate(" + source.y0 + "," + source.x0 + ")"; })\n .on("click", click);\n\n nodeEnter.append("circle")\n .attr("r", 1e-6)\n .style("fill", function (d) { return d._children ? "lightsteelblue" : "#fff"; });\n\n nodeEnter.append("text")\n .attr("x", function (d) { return d.children || d._children ? -10 : 10; })\n .attr("dy", ".35em")\n .attr("text-anchor", function (d) { return d.children || d._children ? "end" : "start"; })\n .text(function (d) { return d.name; })\n .style("fill-opacity", 1e-6);\n\n // Transition nodes to their new position.\n var nodeUpdate = node.transition()\n .duration(duration)\n .attr("transform", function (d) { return "translate(" + d.y + "," + d.x + ")"; });\n\n nodeUpdate.select("circle")\n .attr("r", 4.5)\n .style("fill", function (d) {\n if (d.class === "found") {\n return "#ff4136"; //red\n }\n else if (d._children) {\n return "lightsteelblue";\n }\n else {\n return "#fff";\n }\n })\n .style("stroke", function (d) {\n if (d.class === "found") {\n return "#ff4136"; //red\n }\n });\n\n nodeUpdate.select("text")\n .style("fill-opacity", 1);\n\n // T
-
将数据从指令迁移到控制器非常简单，您只需将数据添加到控制器中的“$scope”并从“scope”中的指令读取数据即可。例如，“scope.data=root;”将根数据放入“scope.data”，您只需使用以下结构即可访问控制器中的数据：“$scope.data”。Angular 中的控制器看起来像“asp.net mvc”模型中的控制器。如果您有 Multi 指令，只需定义一个控制器并使用具有共享数据和函数的指令。 (2认同)
| 归档时间： |
|
| 查看次数： |
2348 次 |
| 最近记录： |