bgloh/AngularJS_D3_JS

## AngularJS_D3_JS
<!DOCTYPE html>
<html>
<head>
<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
</head>
<style>
  body{
    margin: 0;
  }
  donut-chart{
    width: 400px;
    height: 400px;
    display: inline-block;
  }
</style>
<h1>Angular Js + D3.js</h1>
<body ng-app="myApp" ng-controller="d3ChartController">
  <d3-chart data= "data1" color = "green" radius = "50"></d3-chart>
  <p>data1:  {{data1}} </p>
 <d3-chart data="[{x: 10, y: 10}, {x: 150, y: 50}, {x: 400, y: 150}]
" color = "red" radius = "20"></d3-chart>
<p> serviceTest : {{sayHello}} </p>
</body>
</html>


<script>

var app = angular.module('myApp', []);
// service


app.controller('d3ChartController',['$scope','testFactory',d3ChartController]);
function d3ChartController($scope, testFactory){
  $scope.variable1 = [{a:10, b:50},{city: "Seoul", loc: 24.7}];
  $scope.data1 = [{x: 10, y: 10}, {x: 300, y: 50}, {x: 600, y: 150}];
  $scope.sayHello = testFactory.sayHello("to the World !!");
}

app.factory('testFactory', function(){
return {
    sayHello: function(text){
        return "Factory says \"Hello " + text + "\"";
    },
    sayGoodbye: function(text){
        return "Factory says \"Goodbye " + text + "\"";
    }
}});

app.directive('d3Chart', function(){
  return {
    scope: { data: '=' , radius: '=', color:'='},
    restrict: 'E',
    controller:'d3ChartController',
    template: "<p>hello world</p>",
    link: link
  };
  function link(scope, element,attributes) {
    // the D3 bits..
    var margin = {top: 50, right: 40, bottom: 20, left: 120},
    width = 960 - margin.left - margin.right,
    height = 480 - margin.top - margin.bottom;

    var color2 = d3.scale.category10();
    var el = element[0];
    //var width = el.clientWidth;
    //var height = el.clientHeight;
    var svg = d3.select(el).append('svg')
                .attr("width", width + margin.left + margin.right)
                .attr("height", height + margin.top + margin.bottom)
                .append("g")
                .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    var circles = svg.selectAll("circle")
        .data(scope.data)
        .enter().append("circle")
        .attr("cx", function(d){return d.x;})
        .attr("cy", function(d){return d.y;})
        .attr("r", scope.radius)
        .style("fill", attributes.color)
        console.log(width);
        console.log(scope.variable1[0]);
  }
});


</script>
	<!DOCTYPE html>
	<html>
	<head>
	<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
	</head>
	<style>
	body{
	margin: 0;
	}
	donut-chart{
	width: 400px;
	height: 400px;
	display: inline-block;
	}
	</style>
	<h1>Angular Js + D3.js</h1>
	<body ng-app="myApp" ng-controller="d3ChartController">
	<d3-chart data= "data1" color = "green" radius = "50"></d3-chart>
	<p>data1: {{data1}} </p>
	<d3-chart data="[{x: 10, y: 10}, {x: 150, y: 50}, {x: 400, y: 150}]
	" color = "red" radius = "20"></d3-chart>
	<p> serviceTest : {{sayHello}} </p>
	</body>
	</html>


	<script>

	var app = angular.module('myApp', []);
	// service



	app.controller('d3ChartController',['$scope','testFactory',d3ChartController]);
	function d3ChartController($scope, testFactory){
	$scope.variable1 = [{a:10, b:50},{city: "Seoul", loc: 24.7}];
	$scope.data1 = [{x: 10, y: 10}, {x: 300, y: 50}, {x: 600, y: 150}];
	$scope.sayHello = testFactory.sayHello("to the World !!");
	}

	app.factory('testFactory', function(){
	return {
	sayHello: function(text){
	return "Factory says \"Hello " + text + "\"";
	},
	sayGoodbye: function(text){
	return "Factory says \"Goodbye " + text + "\"";
	}
	}});

	app.directive('d3Chart', function(){
	return {
	scope: { data: '=' , radius: '=', color:'='},
	restrict: 'E',
	controller:'d3ChartController',
	template: "<p>hello world</p>",
	link: link
	};
	function link(scope, element,attributes) {
	// the D3 bits..
	var margin = {top: 50, right: 40, bottom: 20, left: 120},
	width = 960 - margin.left - margin.right,
	height = 480 - margin.top - margin.bottom;

	var color2 = d3.scale.category10();
	var el = element[0];
	//var width = el.clientWidth;
	//var height = el.clientHeight;
	var svg = d3.select(el).append('svg')
	.attr("width", width + margin.left + margin.right)
	.attr("height", height + margin.top + margin.bottom)
	.append("g")
	.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

	var circles = svg.selectAll("circle")
	.data(scope.data)
	.enter().append("circle")
	.attr("cx", function(d){return d.x;})
	.attr("cy", function(d){return d.y;})
	.attr("r", scope.radius)
	.style("fill", attributes.color)
	console.log(width);
	console.log(scope.variable1[0]);
	}
	});



	</script>