scatter-chart-ex

scatter-chart-ex.js

//works.

//in html

// <div><scatter-chart  id-d3="rulesScatterChart" name-d3="scatterChartRulesData"
//                                 class="rnia-scatter-chart" ></scatter-chart></div>

//.


getRNIAapp.directive('scatterChart',function(rniaWrapper){
	var scatterChartObject;
	scatterChartObject = {
		restrict: 'EA',
		replace: true,
		template: '<div id="{{idD3}}" class="chartWrap"> <svg></svg> </div>',
		controller: function ctrlFunction($scope){
			$scope.$on('wrapperSet', function() {//yes
			});
		},
		scope: {
			idD3: '@',
			nameD3: '@'
		},
		link: function (scope, element, attrs) {

			var chart;
			nv.addGraph(function () {
				chart = nv.models.scatterChart()
					.showDistX(true)
					.showDistY(true)
					//.height(500)
					.useVoronoi(true)
					.color(d3.scale.category10().range());

				chart.xAxis.tickFormat(d3.format('.02f'));
				chart.yAxis.tickFormat(d3.format('.02f'));

				var data=rniaWrapper.get(attrs.nameD3);
				//d3.select('#test1 svg')
				d3.select('#' + attrs.idD3 + ' svg')
					.datum(data)
					.transition().duration(500)
					.call(chart);

				nv.utils.windowResize(chart.update);

				chart.dispatch.on('stateChange', function (e) {
						nv.log('New State:', JSON.stringify(e));
					});

				scope.$on('wrapperSet', function() {
					//yes but chart.update() will not affect the data&draw
					var data=rniaWrapper.get(attrs.nameD3);
					d3.select('#' + attrs.idD3 + ' svg')
						.datum(data)
						.transition().duration(500)
						.call(chart);

				});

				return chart;
			});
		}
	};
	return scatterChartObject;
});