当前位置: 动力学知识库 > 问答 > 编程问答 >

javascript - integrating d3.js graph into angularJS?

问题描述:

i am getting problem while converting d3.js into angularJS so i have core d3.js code

i.e.

app.js

 var margin = {top: 20, right: 120, bottom: 20, left: 120},

width = 960 - margin.right - margin.left,

height = 500 - margin.top - margin.bottom;

var i = 0;

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("body").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 + ")");

// load the external data

d3.json("treeData.json", function(error, treeData) {

root = treeData[0];

update(root);

});

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; });

// Declare the nodes…

var node = svg.selectAll("g.node")

.data(nodes, function(d) { return d.id || (d.id = ++i); });

// Enter the nodes.

var nodeEnter = node.enter().append("g")

.attr("class", "node")

.attr("transform", function(d) {

return "translate(" + d.y + "," + d.x + ")"; });

nodeEnter.append("circle")

.attr("r", 10)

.style("fill", "#fff");

nodeEnter.append("text")

.attr("x", function(d) {

return d.children || d._children ? -13 : 13; })

.attr("dy", ".35em")

.attr("text-anchor", function(d) {

return d.children || d._children ? "end" : "start"; })

.text(function(d) { return d.name; })

.style("fill-opacity", 1);

// Declare the links…

var link = svg.selectAll("path.link")

.data(links, function(d) { return d.target.id; });

// Enter the links.

link.enter().insert("path", "g")

.attr("class", "link")

.attr("d", diagonal);

}

index.html

 <!DOCTYPE html>

<html ng-app="d3DemoApp">

<head>

<meta charset="utf-8">

<title>Collapsible Tree Example</title>

<link href="style.css" rel="stylesheet">

</head>

<body ng-controller="AppCtrl">

<!-- load the d3.js library -->

<script src="treeData.json"></script>

<script src="http://d3js.org/d3.v3.min.js"></script>

<script src="app.js"></script>

</body>

</html>

style.css

 .node circle {

fill: #fff;

stroke: steelblue;

stroke-width: 3px;

}

.node text { font: 12px sans-serif; }

.link {

fill: none;

stroke: #ccc;

stroke-width: 2px;

}

treeData.json

 [

{

"name": "Top Level",

"parent": "null",

"children": [

{

"name": "Level 2: A",

"parent": "Top Level",

"children": [

{

"name": "Son of A",

"parent": "Level 2: A"

},

{

"name": "Daughter of A",

"parent": "Level 2: A"

}

]

},

{

"name": "Level 2: B",

"parent": "Top Level"

}

]

}

]

so please anyone help me to convert thease code into angularjs

so it will help me for creating another graph in angularJS

thanks,

分享给朋友:
您可能感兴趣的文章:
随机阅读: