7
मुझे लगता है कि चाहते हैं के बाद मैं इनपुट फ़ील्ड के अंदर नए मूल्यों के साथ submit बटन पर क्लिक करें, मेरे नेटवर्क d3.js भूखंड द्वारा उत्पन्न नई ग्राफ के आधार पर अपडेट कर दिया जाएगा नया इनपुट मूल्य। यहाँ निम्नलिखित में, तुम मेरे उदाहरण कोड पा सकते हैं:का मेल AngularJS और d3.js: नए इनपुट जमा करने के बाद एक साजिश रिफ्रेशिंग पैरामीटर
GenerateGraph.js इस फ़ाइल में कार्य करता है जो उत्पन्न एक (randomGraph) प्रस्तुत इनपुट मूल्यों पर आधारित का एक समूह होता है। फिर ब्राउजर में रीफ्रेश होने के लिए ग्राफ की आवश्यकता होती है।
function degree(node,list){
var deg=new Array();
for (var i=0; i<node.length; i++){
var count=0;
for (var j=0; j<list.length; j++){
if (node[i]==list[j][0] || node[i]==list[j][1]){
count++;
}
}
deg.push(count);
}
return deg;
}
function randomGraph (n, m) { //creates a random graph on n nodes and m links
var graph={};
var nodes = d3.range(n).map(Object),
list = randomChoose(unorderedPairs(d3.range(n)), m),
links = list.map(function (a) { return {source: a[0], target: a[1]} });
graph={
Node:nodes,
ListEdges:list,
Links:links
}
return graph;
}
function randomChoose (s, k) { // returns a random k element subset of s
var a = [], i = -1, j;
while (++i < k) {
j = Math.floor(Math.random() * s.length);
a.push(s.splice(j, 1)[0]);
};
return a;
}
function unorderedPairs (s) { // returns the list of all unordered pairs from s
var i = -1, a = [], j;
while (++i < s.length) {
j = i;
while (++j < s.length) a.push([s[i],s[j]])
};
return a;
}
network.html
!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tangerine">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<title>graph</title>
<script src='http://d3js.org/d3.v3.min.js'></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body ng-app="myApp">
<script src="GenerateGraph.js" type="text/javascript"></script>
<script src="svgGraph.js" type="text/javascript"></script>
<h1 class="title">Simulating a network</h1>
<div id="outer" ng-controller="MainCtrl" class="col-md-6">
<network-inputs inputs="networkInputs" submit="submit(inputs)"></network-inputs>
</div>
<!--test -->
<script type="text/javascript">
//get the input parameters for plotting
angular.module("myApp", [])
.directive('networkInputs', function() {
return {
restrict: 'E',
scope: {
inputs: '<',
submit: '&'
},
link : link,
template:
'<h3 >Initialise new parameters to generate a network </h3>'+
'<form ng-submit="submit({inputs: inputs})" class="form-inline">'+
'<div class="form-group">'+
'<label>Number of nodes</label>'+
'<input type="number" min="10" class="form-control" ng-model="inputs.N" ng-required="true">'+
'</div>'+
'<div class="form-group">'+
'<label>Number of links</label>'+
'<input type="number" min="0.1" class="form-control" ng-model="inputs.m" ng-required="true">'+
'</div>'+
'<button style="color:black; margin: 1rem 4rem;" type="submit">Generate</button>' +
'</form>'};
})
.factory("initialiseNetwork",function(){
var data = {
N: 20,
m: 50,
};
return {
networkInputs:data
};
})
.controller("MainCtrl", ['$scope','initialiseNetwork' ,function($scope,initialiseNetwork) {
$scope.networkInputs={};
$scope.mySVG=function(){
var graph=randomGraph($scope.networkInputs.N, $scope.networkInputs.m);
};
function init(){
$scope.networkInputs=initialiseNetwork.networkInputs;
//Run the function which generates the graph and plot it
}
init();
$scope.submit = function(inputs) {
var dataObject = {
N: inputs.N,
m: inputs.m
};
//lets simply log them but you can plot or smth other
console.log($scope.networkInputs);
}
}]);
</script>
</body>
</html>
svgGraph.js
function link(scope,element, attrs){
//SVG size
var width = 1800,
height = 1100;
// We only need to specify the dimensions for this container.
var vis = d3.select(element[0]).append('svg')
.attr('width', width)
.attr('height', height);
var force = d3.layout.force()
.gravity(.05)
.distance(100)
.charge(-100)
.size([width, height]);
// Extract the nodes and links from the data.
scope.$watch('val',function(newVal,oldVal){
vis.selectAll('*').remove();
if (!newVal){
return;
}
var Glinks = newVal.links;
var W=degree(newVal.nodes,newVal.list);
var Gnodes = [];
var obj=newVal.nodes;
Object.keys(obj).forEach(function(key) {
Gnodes.push({"name":key, "count":W[key]});
});
//Creates the graph data structure
force.nodes(Gnodes)
.links(Glinks)
.linkDistance(function(d) {
return(0.1*Glinks.length);
})//link length
.start();
//Create all the line svgs but without locations yet
var link = vis.selectAll(".link")
.data(Glinks)
.enter().append("line")
.attr("class", "link")
.style("stroke-width","0.3px");
//Do the same with the circles for the nodes - no
var node = vis.selectAll(".node")
.data(Gnodes)
.enter().append("g")
.attr("class", "node")
.call(force.drag);
node.append("circle")
.attr("r", function(d){
return d.count*0.5;
})
.style("opacity", .3)
.style("fill", "red");
//add degree of node as text
node.append("text")
.attr("text-anchor", "middle")
.text(function(d) { return d.count })
.attr("font-family",'Raleway',"Tangerine");
//Now we are giving the SVGs co-ordinates - the force layout is generating the co-ordinates which this code is using to update the attributes of the SVG elements
force.on("tick", function() {
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("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
});
});
}
plunkerhere है में लिंक।
आप redu को खुश किया जा सका: न्यूनतम = "0.1" क्रोम के साथ
यह काम कर रहे plunkr है अपनी समस्या को एक [mcve] में सीओ? यह कोड सभी के माध्यम से जाने के लिए और अधिक काम है। – ochi
@ochi में आपकी सहायता करना हमारे लिए आसान बनाएं Iochi आपको विश्वास दिलाता हूं कि मैंने इसे सरल बना दिया है, लेकिन मुझे यह भी चाहिए कि ये टुकड़े एक साथ काम करें। – Dalek
क्या आप इस मुद्दे को प्रदर्शित करने के लिए एक पहेली/plnkr एक साथ रख सकते हैं? – carlcheel