angularjs – 将D3.js(可折叠树)集成到Angular应用程序中有困难
发布时间：2020-12-17 07:42:26 所属栏目：安全 来源：网络整理
导读：我在一个角度的应用程序.我想添加以下 d3 chart,但是当我简单地将JavaScript插入到我的控制器中时,样式到我的样式表中,没有任何显示.有人向我推荐,Angular和D3不是很好玩. 我附加了我的角度设置,而不添加在d3对象中.我想将它添加到workHistory Controller /
|
我在一个角度的应用程序.我想添加以下
d3 chart,但是当我简单地将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",{"name": "mod","size": 591},{"name": "mul",{"name": "neq","size": 599},{"name": "not","size": 386},{"name": "or","size": 323},{"name": "orderby","size": 307},{"name": "range",{"name": "select","size": 296},{"name": "stddev","size": 363},{"name": "sub","size": 600},{"name": "sum","size": 280},{"name": "update",{"name": "variance","size": 335},{"name": "where","size": 299},{"name": "xor","size": 354},{"name": "_","size": 264}
]
},{"name": "Minimum",{"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",{"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",{"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
在应用程序中进行角度应用和使用d3非常简单.首先,您需要了解有关角度结构的内容.如你所知,您需要使用ng-app来使用角度库,您可以使用html或body标签来定义.如果要在您的指令之间共享数据或使用角度服务,您需要角度控制器.在这种情况下,$scope在控制器和指令之间共享.你必须使用的最后一个功能是指令.
所以根据这个段落,我们来规范你的代码.首先,您不应该为css参数定义一个指令,只需将它们全部添加到一个文件中,并将其注入主页面或将其插入到< style>标签. 正如我提到的只是使用JavaScript函数的指令. 所以我们来实现角度应用： var app = angular.module('App');
var ctrl = app.controller("treeCrtl",["$scope",function ($scope) {
}]);
这两个功能是ng-app和角度控制器,这是指令. ctrl.directive("workHistory",function () {
return {
restrict: 'E',link: function link(scope,el,attr) {
var div = d3.select("body")
.append("div") // declare the tooltip div
.attr("class","tooltip")
.style("opacity",0);
var margin = { top: 20,right: 120,bottom: 20,left: 120 },width = 960 - margin.right - margin.left,height = 800 - margin.top - margin.bottom;
var i = 0,duration = 750,root,select2_data;
var diameter = 960;
var tree = d3.layout.tree()
.size([height,width]);
var diagonal = d3.svg.diagonal()
.projection(function (d) { return [d.y,d.x]; });
var svg = d3.select(el[0]).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 + ")");
//recursively collapse children
function collapse(d) {
if (d.children) {
d._children = d.children;
d._children.forEach(collapse);
d.children = null;
}
}
// Toggle children on click.
function click(d) {
if (d.children) {
d._children = d.children;
d.children = null;
}
else {
d.children = d._children;
d._children = null;
}
update(d);
}
function openPaths(paths) {
for (var i = 0; i < paths.length; i++) {
if (paths[i].id !== "1") {//i.e. not root
paths[i].class = 'found';
if (paths[i]._children) { //if children are hidden: open them,otherwise: don't do anything
paths[i].children = paths[i]._children;
paths[i]._children = null;
}
update(paths[i]);
}
}
}
root = values;
select2_data = extract_select2_data(values,[],0)[1];//I know,not the prettiest...
root.x0 = height / 2;
root.y0 = 0;
root.children.forEach(collapse);
update(root);
//init search box
$("#search").select2({
data: select2_data,containerCssClass: "search"
});
//attach search box listener
$("#search").on("select2-selecting",function(e) {
var paths = searchTree(root,e.object.text,[]);
if (typeof (paths) !== "undefined") {
openPaths(paths);
} else {
alert(e.object.text + " not found!");
}
});
d3.select(self.frameElement).style("height","800px");
function update(source) {
// Compute the new tree layout.
var nodes = tree.nodes(root).reverse(),links = tree.links(nodes);
// Normalize for fixed-depth.
nodes.forEach(function (d) { d.y = d.depth * 180; });
// Update the nodesa |