parallel-coordinates-example

parallel-coordinates-example.js

// doesn't work.

//in html:
// <parallel-coordinates id-d3="aaa" name-d3="parallelCoordinatesData"></parallel-coordinates>
//----------

getRNIAapp.directive('parallelCoordinates',function(rniaWrapper){

	var parallelCoordinatesObject={
		restrict:'EA',
		replace:false,
		template:'<div id="{{idD3}}" class="parcoords" style="width:auto;height:270px;"></div>',
		scope:{
			idD3: '@',
			nameD3: '@'
		},
		link: function(scope, element, attrs) {

			//d3 object
			var pc_progressive;

			//get data from service
			//attrs.nameD3 works in other examples
			var data=rniaWrapper.get(attrs.nameD3);

			//colorPicker
			var colorgen = d3.scale.category20();
			var colors = {};
			_(data).chain()
				.pluck('object')
				.uniq()
				.each(function(d,i) {
					colors[d] = colorgen(i);
				});
			var color = function(d) { return colors[d.object]; };


			//render
			// attrs.idD3 works in other examples
			pc_progressive = d3.parcoords()("#"+attrs.idD3)
				.data(data)
//				.color(color)
				.alpha(0.9)
				.mode("queue")
				.render()
				.brushable()  // enable brushing
				.interactive();  // command line mode

			pc_progressive.svg.selectAll("text")
				.style("font", "10px sans-serif");


			//----------
//			scope.$on('wrapperSet', function() {
//					//yes but chart.update() will not affect the data&draw
//					var data=rniaWrapper.get(attrs.nameD3);
//					console.log('on wrapperSet in dr parallelCoordinates..');
//
//				});

		}

	};//end of parallelCoordinatesObject
	return parallelCoordinatesObject

});