d3.js绘制PLS-da图【散点+线条】

实现如下效果(如下是效果图)：，由于具体的图形实现的比较简单（需要自己扩展成自定义颜色，和自定义形状）


一、json数据：
 

{
	"data":[[[-1,1],[2,-2],[3,3],[4,4]],[[2,1],[3,2],[4,3],[5,4]]],
	"link":[[-0.5,1, 2, 4]],
	"legend":["R2", "Q2"],
	"params":{
		"title":"这是标题测试"
	}
}
        

 

二、用到的js插件
#jquery插件

<script src="jquery-1.8.3.min.js"></script>
#d3 v3版本插件

<script src="d3-3.min.js"></script>
#图的实现文件
<script src="plsda.js"></script>

三、图的调用
var content = $.parseJSON($('textarea').val()); //从textarea里面取出图的json数据并转化为object
graph.plsda("container", content);   //把生成图放在#container里面

四、以下为图的代码实现（D3.js实现）

var graph = {
	plsda:function(container, content) {

		var colors = ['#ff0000', '#00ff00', '#0000ff'];
		var width = 700;
		var height = 500;

		var margin = {top:70, right:150, bottom:50, left:50};

		var grid_width = width - margin.left - margin.right;
		var grid_height = height - margin.top - margin.bottom;

		var svg = d3.select('#'+container).append('svg')
			.attr('version', '1.1')
			.attr('style', 'font-family:arial')
			.attr('xmlns', 'http://www.w3.org/2000/svg')
			.attr('width', width)
			.attr('height', height);

		var title = content.params.title;
		svg.append('text').text(title).attr('text-anchor', 'middle')
			.attr('transform', 'translate('+(width-7.7*title.length/2)/2+', '+(margin.top - margin.top/1.5)+')');

		var max_x_value = 0;
		var max_y_value = 0;

		var min_x_value = 0;
		var min_y_value = 0;

		for (var i in content['data']) {
			for (var j in content['data'][i]) {
				max_x_value = max_x_value > content['data'][i][j][0] ? max_x_value : content['data'][i][j][0];
				max_y_value = max_y_value > content['data'][i][j][1] ? max_y_value : content['data'][i][j][1];

				min_x_value = min_x_value < content['data'][i][j][0] ? min_x_value : content['data'][i][j][0];
				min_y_value = min_y_value < content['data'][i][j][1] ? min_y_value : content['data'][i][j][1];
			}
		}
		min_x_value = min_x_value + min_x_value /5;
		min_y_value = min_y_value + min_y_value /5;

		var x_scale = d3.scale.linear().domain([min_x_value,max_x_value]).range([0, grid_width]);
		var y_scale = d3.scale.linear().domain([max_y_value,min_y_value]).range([0, grid_height]);

		

		var xaxis = d3.svg.axis()
			.scale(x_scale)
			.orient('bottom')
			.outerTickSize(0);

		var yaxis = d3.svg.axis()
			.scale(y_scale)
			.orient('left')
			.outerTickSize(0);

		var main = svg.append('g')
			.attr('class', 'main')
			.attr('transform', 'translate('+margin.left+', '+margin.top+')');

		// 绘制x轴
		var xaixs_top = grid_height;
		var xaxis = main.append('g')
			.attr('class', 'xaxis')
			.call(xaxis)
			.attr('transform', 'translate(0, '+xaixs_top+')');

		

		// 绘制y轴

		var yaxis = main.append('g')
			.attr('class', 'yaxis')
			.call(yaxis)

		d3.selectAll('.tick')
			.selectAll('line')
			.attr('stroke', '#000');

		d3.selectAll('path.domain')
			.attr('stroke', '#000');
		// 绘制x方向辅助线
		main.append('line')
			.attr('x1', x_scale(min_x_value))
			.attr('y1', y_scale(0))
			.attr('x2', x_scale(max_x_value))
			.attr('y2', y_scale(0))
			.attr('stroke', '#ccc');

		// 绘制y方向辅助线
		main.append('line')
			.attr('x1', x_scale(0))
			.attr('y1', y_scale(min_y_value))
			.attr('x2', x_scale(0))
			.attr('y2', y_scale(max_y_value))
			.attr('stroke', '#ccc');

		var area = main.append('g')
			.attr('class', 'area');

		var rect_width = grid_width/30;
		var circle_r   = grid_width/60;
		for (var i in content.data){
			if (i == 0){
				area.selectAll('.rects'+i)
					.data(content.data[i])
					.enter()
					.append('rect')
					.attr('class', 'rects'+i)
					.attr('width', rect_width)
					.attr('height',rect_width)
					.attr('x', function(d, i) {
						return x_scale(d[0]);
					})
					.attr('y', function(d,i) {
						return y_scale(d[1]);
					})
					.attr('fill', colors[i])
					.attr('transform', 'translate(-'+rect_width/2+',-'+rect_width/2+')');
			} else {
				area.selectAll('.circles'+i)
					.data(content.data[i])
					.enter()
					.append('circle')
					.attr('class', 'circles'+i)
					.attr('r', circle_r)
					.attr('cx', function(d, i) {
						return x_scale(d[0]);
					})
					.attr('cy', function(d,i) {
						return y_scale(d[1]);
					})
					.attr('fill', colors[i]);
			}
		}

		area.selectAll('.links')
			.data(content.link)
			.enter()
			.append('line')
			.attr('class', 'links')
			.attr('x1', function(d, i) {
				return x_scale(d[0])
			})
			.attr('y1', function(d, i) {
				return y_scale(d[1]);
			})
			.attr('x2', function(d, i) {
				return x_scale(d[2]);
			})
			.attr('y2', function(d, i) {
				return y_scale(d[3]);
			})
			.attr('stroke', '#aaa')
			.attr('stroke-dasharray', 10)
			.attr('stroke-width', 2);

		var legend_shape_y = grid_width/20;
		// 画图例
		var legend_obj = svg.append('g').attr('transform', 'translate('+(width-margin.right/2)+','+(margin.top - margin.top/2)+')');

		var legend_rect_y = grid_width/40;
		for (var i in content.legend) {
			if (i == 0) {
				legend_obj.append('rect')
					.attr('width', rect_width)
					.attr('height',rect_width)
					.attr('x', rect_width/4)
					.attr('y', function() {
						return legend_shape_y * i+rect_width/4;
					})
					.attr('fill', colors[i])
					.attr('transform', 'translate(-'+legend_rect_y+',-'+legend_rect_y+')');
			} else {
				legend_obj.append('circle')
					.attr('cx', 0)
					.attr('cy', function() {
						return legend_shape_y * i;
					})
					.attr('r', circle_r)
					.attr('fill', function() {
						return colors[i%colors.length];
					})
			}
			legend_obj.selectAll('legend-text')
				.data(content.legend)
				.enter()
				.append('text')
				.attr('class', 'legend-text')
				.text(function(d) {
					return d;
				})
				.attr('x', legend_shape_y/2)
				.attr('y', function(d, i) {
					return i * legend_shape_y+4;
				})
				.attr('style', "font-size:11px")
				.attr('text-anchor', 'start');
		}
	}
}

以上就是图的全部实现，如果有不清楚的地方可以留言，欢迎交流,