d3.js绘制散点图+置信区间+箭头

最新推荐文章于 2022-03-31 17:19:36 发布
最新推荐文章于 2022-03-31 17:19:36 发布
阅读量298 收藏
点赞数
分类专栏： D3 文章标签： 散点图 散点图 置信区间 散点图 置信区间 箭头
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhouyonggo/article/details/82624794
版权

实现如下效果：

散点图+置信区间+箭头
一、json数据：
 

{
    "data":[{"name":"A_1", "value":[-6.89292010667, -46.3134198876]},{"name":"A_2", "value":[-38.4093008453, 72.8325103196],"color":"#ff0000", "symbol":"square","color_category_name":"A", "symbol_category_name":"B"},{"name":"A_3","value":[-9.86094028781, 2.30333750613],"color":"#388E3C", "symbol":"circle","color_category_name":"A", "symbol_category_name":"B"},{"name":"B_1","value":[91.2493989001, 16.4003414111],"color":"#388E3C", "symbol":"circle","color_category_name":"B", "symbol_category_name":"B"},{"name":"B_2", "value":[-14.1303963457, 1.46942794051],"color":"#388E3C", "symbol":"circle","color_category_name":"B", "symbol_category_name":"A"},{"name":"B_3", "value":[-21.9558413147, -46.6921972897],"color":"#388E3C", "symbol":"circle","color_category_name":"A", "symbol_category_name":"A"}],

    "marker":[
        {"name":"vector", "color":"#ff0000", "data":[["P", -1157.2167, -539.4148],["C", -108.123, -768.7028],["N", -1644.1453, 231.7858],["C_N", 587.9731, -1202.0454]]},
        {"name":"vector1", "color":"#ccc", "data":[["P", -1057.2167, -339.4148],["C", -98.123, -668.7028],["N", -1444.1453, 131.7858],["C_N", 487.9731, -1002.0454]]}
    ],
	"ellipse": [
		{"color": "#388E3C","name": "type1","c22": 87.859328134468,"c21": -31.536237516401,"cy": 189.26165885308,"cx": 151.22500150983,"c12": 22.719880658555,"c11": 121.95278143051}
	],
    "params":{
        "title":"PCA Analysis",
        "x_label":"PC1(21.88%)",
        "y_label":"PC2(20.39)",
		"show_label":true,
		"show_grid":true,
		"show_legend":true,
		"show_marker":true,
		"show_ellipse":true
    },
	"size":{
		"width":800,
		"height":600
	}
}

参数说明：

  • 用途:散点图+环境因子（箭头）+置信区间（椭圆）(不需要指定的属性可以去掉)
  • *data[name:标签，value[x轴，y轴], color:散点颜色, symbol:散点形状, color_category_name:颜色对应的图例名称,symbol_category_name:形状对应的图例名称]
  • marker:环境因子，二维数组
  • ellipse:置信区间(画椭圆)
  • show_label:显示散点的标签名
  • title:标题
  • x_label:x轴标签
  • y_label:y轴标签
  • show_grid:true|false 是否显示网格
  • show_legend:true|false, 是否显示图例
  • show_marker:true|false, 是否显示环境因子
  • show_ellipse:true|false, 是否显示置信区间

以下为toolip的样式：

<style>
.scatter_tooltip{  
	font-family:simsun;  
	font-size:16px;  
	width:120;  
	height:auto;  
	position:absolute;   
	text-align:center;  
	border-style:solid;  
	border-width:1px;  
	background-color:white;  
	border-radius:5px;
	text-align:left;
}  
</style>


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

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

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

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

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

var graph = {

	/**
	 * 散点图
	 *
	 *
	 *
	 **/
	scatter:function(container, content)
	{
		d3.select('#'+container).select('svg').remove();
		d3.select('body').select('.scatter_tooltip').remove();

		var colors = ["#388E3C", "#F44336", "#0288D1", "#FF9800", "#727272", "#E91E63", "#673AB7", "#8BC34A", "#2196F3", "#D32F2F", "#FFC107", "#BDBDBD", "#F8BBD0", "#3F51B5", "#CDDC39", "#009688", "#C2185B", "#FFEB3B", "#212121", "#FFCCBC", "#BBDEFB", "#0099CC", "#FFcc99"];
		
		var width  = typeof(content.size.width) != 'undefined' ? content.size.width : 700;
		var height = typeof(content.size.height) != 'undefined' ? content.size.height : 500;

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

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

		var min_x_value = max_x_value = 0;
		var min_y_value = max_y_value = 0;

		var legend_colors  = {};
		var legend_symbols = {};
		var default_color = '#ccc';
		var default_symbol = 'circle';

		// 找到最小值、最大值
		for (var i in content.data) {
			min_x_value = min_x_value > content.data[i].value[0] ? content.data[i].value[0] : min_x_value;
			max_x_value = max_x_value < content.data[i].value[0] ? content.data[i].value[0] : max_x_value;

			min_y_value = min_y_value > content.data[i].value[1] ? content.data[i].value[1] : min_y_value;
			max_y_value = max_y_value < content.data[i].value[1] ? content.data[i].value[1] : max_y_value;

			if (typeof(content.data[i].color_category_name) != 'undefined'){
				if (typeof(legend_colors[content.data[i].color_category_name]) == 'undefined'){
					legend_colors[content.data[i].color_category_name] = {};
				}
				legend_colors[content.data[i].color_category_name] = {
					color  : typeof(content.data[i].color) != 'undefined' ? content.data[i].color : default_color,
					symbol : default_symbol,
					name: content.data[i].color_category_name
				};
			}
			if (typeof(content.data[i].symbol_category_name) != 'undefined'){
				if (typeof(legend_symbols[content.data[i].symbol_category_name]) == 'undefined'){
					legend_symbols[content.data[i].symbol_category_name] = {};
				}

				legend_symbols[content.data[i].symbol_category_name] = {
					color  : '#388E3C',
					symbol : typeof(content.data[i].symbol) != 'undefined' ? content.data[i].symbol : default_symbol,
					name: content.data[i].symbol_category_name
				}
			}
		}

		if (typeof(content.marker) != 'undefined') {
			for (var i in content.marker) {
				for (var j in content.marker[i]['data']) {
					min_x_value = min_x_value > content.marker[i]['data'][j][1] ? content.marker[i]['data'][j][1] : min_x_value;
					max_x_value = max_x_value < content.marker[i]['data'][j][1] ? content.marker[i]['data'][j][1] : max_x_value;

					min_y_value = min_y_value > content.marker[i]['data'][j][2] ? content.marker[i]['data'][j][2] : min_y_value;
					max_y_value = max_y_value < content.marker[i]['data'][j][2] ? content.marker[i]['data'][j][2] : max_y_value;
				}
			}
		}

		
		if (min_x_value >=0) {
			min_x_value = 0;
		} else {
			min_x_value += min_x_value /5;
		}

		if (min_y_value >=0) {
			min_y_value = 0;
		} else {
			min_y_value += min_y_value /5;
		}

		if (max_x_value >= 0){
			max_x_value += max_x_value/5;
		} else {
			max_x_value -= max_x_value/5;
		}

		if (max_y_value >= 0){
			max_y_value += max_y_value/5;
		} else {
			max_y_value -= max_y_value/5;
		}



		console.log(min_x_value, max_x_value);
		console.log(min_y_value, max_y_value);


		// 定义比例尺
		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')
			.ticks(6) //设置刻度数量
			.outerTickSize(0);

		var yaxis = d3.svg.axis()
			.scale(y_scale)
			.orient('left')
			.ticks(6) // 设置刻度数量
			.outerTickSize(0);

		// 绘制svg
		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 = typeof(content.params.title) != 'undefined' ? content.params.title : '';
		var title_width = 8;
		var title_x = width/2 - title.length*title_width/2;

		if (title != ''){
			svg.append('text').text(title).attr('transform', 'translate('+title_x+','+margin.top/2+')');
		}

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

		var xaxis_y = grid_height;
		//绘制x比例尺
		var xaxis_obj = main.append('g')
			.attr('class', 'xaxis')
			.call(xaxis)
			.attr('text-ahchor', 'start')
			.attr('transform', 'translate(0,'+xaxis_y+')');

		var yaxis_obj = main.append('g')
			.attr('class', 'yaxis')
			.call(yaxis)
			.attr('text-anchor', 'start');

		// 绘制辅助线

		if (typeof(content.params.show_grid) != 'undefined' && content.params.show_grid == true) {
			var main_help = main.append('g')
				.attr('class', 'main_help');
			d3.select('.yaxis').selectAll('text').each(function() {
				var value = parseFloat(d3.select(this).text().replace(/,/, ''));
				console.log(value);
				main_help.append('line')
					.attr('x1', x_scale(min_x_value))
					.attr('y1', y_scale(value))
					.attr('x2', x_scale(max_x_value))
					.attr('y2', y_scale(value))
					.attr('stroke-dasharray', '5,5')
					.attr('stroke', '#ccc');
			});
		}

		// 显示0位置的辅助线
		if (typeof(content.params.show_zero_grid) != 'undefined' && content.params.show_zero_grid == true) {
			var main_zero_grid = main.append('g')
				.attr('class', 'zero_grid');
			if (0 > min_x_value) {
				main_zero_grid.append('line')
					.attr('class', 'zero_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-dasharray', '5,5')
					.attr('stroke', '#ccc');
			}
			if (0 > min_y_value) {
				main_zero_grid.append('line')
					.attr('class', 'zero_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-dasharray', '5,5')
					.attr('stroke', '#ccc');
			}
		}

		// 是否显示边框

		if (typeof(content.params.show_border) != 'undefined' && content.params.show_border == true) {
			main.append('g')
				.attr('class', 'background')
				.append('rect')
				.attr('width', grid_width)
				.attr('height', grid_height)
				.attr('fill', 'none')
				.attr('stroke', '#000');
		}
		

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

		// 符号生成器
		var shape = graph.drawSymbol();

		
		var word_width = 6;
		var text_y     = -10;

		var tooltip = d3.select("body").append("div")  
			.attr("class","scatter_tooltip") //用于css设置类样式  
			.attr("opacity",0.0);

		// 绘制对应的椭圆

		if (typeof(content.ellipse) != 'undefined' && typeof(content.params.show_ellipse) != 'undefined' && content.params.show_ellipse == true) {

			// 设置生成器
			var ellipse_line = d3.svg.line()
				.x(function(d) {
					return x_scale(d[0]);
				})
				.y(function(d) {
					return y_scale(d[1]);
				});
			var main_ellipse = main.append('g')
				.attr('class', 'main_ellpse');
			
			main_ellipse.selectAll('.ellipses')
				.data(content.ellipse)
				.enter()
				.append('g')
				.attr('class', 'ellipses')
				.each(function(d) {
					var self = d3.select(this);
					self.append('path')
						.attr('d', ellipse_line(graph.generateEllipseData(d)))
						.attr('stroke', d.color)
						.attr('fill',d.color)
						.attr('fill-opacity',0.2);
				});
		}

		// 画对应的散点
		main_scatter.selectAll('.symbols')
			.data(content.data)
			.enter()
			.append('g')
			.attr('class', 'symbols')
			.attr('transform', function(d,i) {
				return 'translate('+x_scale(d.value[0])+','+y_scale(d.value[1])+')';
			})
			.each(function(d) {
				var self = d3.select(this);
				self.append('path')
					.attr('d', shape.type(d.symbol))
					.attr('fill', typeof(d.color) != 'undefined' ? d.color : default_color)
					.on('mouseover', function(d) {
						var page_x     = d3.event.pageX;
						var page_y     = d3.event.pageY+20;
						tooltip.html('<b>'+d.name+"</b><br/> x:"+d.value[0]+"<br/>y:"+d.value[1])  
							.style("left",page_x+"px")  
							.style("top",page_y+"px")  
							.style("opacity",0.9)
							.style('padding', '5px');
					})
					.on('mouseout', function() {
						tooltip.style('opacity', 0);
					})
					.attr('color_category_name', d.color_category_name)
					.attr('symbol_category_name', d.symbol_category_name);

				if(typeof(content.params.show_label) != 'undefined' && content.params.show_label == true) {
					self.append('text')
						.text(function(d) {
							return d.name;
						})
						.attr('style','font-size:11px')
						.attr('x', -(word_width)*d.name.length/2)
						.attr('y', text_y);
				}
			});

		



		//绘制对应的marker数据

		if (typeof(content.marker) != 'undefined' && typeof(content.params.show_marker) != 'undefined' && content.params.show_marker == true) {

			var marker_colors = {};
			for (var i in content.marker){
				marker_colors[content.marker[i].color] = content.marker[i].color;
			}
			//调用箭头生成器
			graph.drawArrow(svg, {colors:marker_colors});

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

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

			for (var i in content.marker) {
				var color = typeof(content.marker[i].color) != 'undefined' ? content.marker[i].color : '#ccc';
				var data  = content.marker[i].data;
				main_marker.selectAll('.mark_'+i)
					.data(data)
					.enter()
					.append('line')
					.attr('class', 'mark_'+i)
					.attr('x1', x_scale(0))
					.attr('y1', y_scale(0))
					.attr('x2', function(d) {
						return x_scale(d[1]);
					})
					.attr('y2', function(d) {
						return y_scale(d[2]);
					})
					.attr('stroke', color)
					.attr('marker-end', 'url('+color+')'); //匹配对应颜色的箭头

				// 画marker对应的圆点
				main_marker_symbol.selectAll('.marker_symbols_'+i)
					.data(data)
					.enter()
					.append('g')
					.attr('class', 'marker_symbols_'+i)
					.attr('transform', function(d) {
						return 'translate('+x_scale(d[1])+','+y_scale(d[2])+')';
					}).each(function(d) {
						var self = d3.select(this);
						self.append('path')
							.attr('d', shape.type('circle'))
							.attr('fill', color)
							.attr('fill-opacity', 0.1)
							.on('mouseover', function() {
								d3.select(this).attr('fill-opacity',0.9);
								var page_x     = d3.event.pageX;
								var page_y     = d3.event.pageY+20;
								tooltip.html('<b>'+d[0]+"</b><br/> x:"+d[1]+"<br/>y:"+d[2])  
									.style("left",page_x+"px")  
									.style("top",page_y+"px")  
									.style("opacity",0.9)
									.style('padding', '5px')
									.style('z-index',10);
							})
							.on('mouseout', function() {
								d3.select(this).attr('fill-opacity',0.1);
								tooltip.style('opacity',0.0)
									.style('z-index', -10);

							});
					});
			}
		}

		// 定义比例尺css样式
		d3.select('.xaxis').selectAll('line').attr('stroke', '#000');
		d3.select('.xaxis').selectAll('path').attr('stroke', '#000');

		d3.select('.yaxis').selectAll('line').attr('stroke', '#000');
		d3.select('.yaxis').selectAll('path').attr('stroke', '#000');

		var x_label = typeof(content.params.x_label) != 'undefined' ? content.params.x_label : '';
		var tick_label_width = 10;
		if (x_label != '') {
			x_label_x = width/2 - x_label.length *tick_label_width/2;
			svg.append('text').text(x_label)
				.attr('transform', 'translate('+x_label_x+','+(height-margin.bottom/3)+')')
				.attr('style', 'font-size:12px');
		}

		var y_label = typeof(content.params.y_label) != 'undefined' ? content.params.y_label : '';

		if (y_label != '') {
			y_label_x = height/2 - x_label.length *tick_label_width/4;
			svg.append('text').text(y_label)
				.attr('transform', 'translate('+margin.left/4+', '+y_label_x+')rotate(-90)')
				.attr('style', 'font-size:12px');
		}


		// 显示图例
		if (typeof(content.params.show_legend) != 'undefined' && content.params.show_legend == true) {
			var legend_line_height = 20;
			var legend_obj = svg.append('g')
				.attr('class', 'legend_group')
				.attr('transform', 'translate('+(grid_width+margin.right/2)+','+margin.top/2+')');
			var k = 0;
			for (var i in legend_colors){
				var value = legend_colors[i];
				var legend = legend_obj
					.append('g')
					.attr('class', 'legend_colors_'+i)
					.attr('transform', 'translate(0, '+(k* legend_line_height)+')')
					.attr('select_id', value.name)
					.attr('select', 1)
					.attr('style', 'cursor:pointer')
					.on('click', function() {
						var self = d3.select(this);
						var value = self.attr('select_id');
						var select = self.attr('select');

						if (select == '1') {
							self.attr('select', 0);
							self.attr('fill-opacity',0.2);

							// 找到对应的散点

							d3.select('.symbol_group').selectAll('.symbols')
								.each(function() {
									var self = d3.select(this);
									if (self.select('path').attr('color_category_name') == value) {
										self.attr('opacity', 0.0);
									}
								});
						} else {
							self.attr('select', 1);
							self.attr('fill-opacity', 1.0);

							// 找到对应的散点

							d3.select('.symbol_group').selectAll('.symbols')
								.each(function() {
									var self = d3.select(this);
									if (self.select('path').attr('color_category_name') == value) {
										self.attr('opacity', 1.0);
									}
								});
						}

					});
				legend.append('path')
					.attr('d', shape.type(value.symbol))
					.attr('fill', value.color);
				legend.append('text')
					.text(value.name)
					.attr('style', 'font-size:11px')
					.attr('x', 8)
					.attr('y', 4)
					.attr('select',1)
				k ++;
			}

			var legend = legend_obj
					.append('g')
					.attr('transform', 'translate(0, '+(k* legend_line_height)+')');

			legend.append('text')
				.text('----------')
				.attr('fill', '#000')
				.attr('stroke', 'none');
			k++;

			for (var i in legend_symbols){
				var value = legend_symbols[i];
				var legend = legend_obj
					.append('g')
					.attr('transform', 'translate(0, '+(k* legend_line_height)+')')
					.attr('select_id', value.name)
					.attr('select', 1)
					.attr('style', 'cursor:pointer')
					.on('click', function() {
						var self = d3.select(this);
						var value = self.attr('select_id');
						var select = self.attr('select');

						if (select == '1') {
							self.attr('select', 0);
							self.attr('fill-opacity',0.2);

							// 找到对应的散点

							d3.select('.symbol_group').selectAll('.symbols')
								.each(function() {
									var self = d3.select(this);
									if (self.select('path').attr('symbol_category_name') == value) {
										self.attr('opacity', 0.0);
									}
								});
						} else {
							self.attr('select', 1);
							self.attr('fill-opacity', 1.0);

							// 找到对应的散点

							d3.select('.symbol_group').selectAll('.symbols')
								.each(function() {
									var self = d3.select(this);
									if (self.select('path').attr('symbol_category_name') == value) {
										self.attr('opacity', 1.0);
									}
								});
						}

					});
				;
				legend.append('path')
					.attr('d', shape.type(value.symbol))
					.attr('fill', value.color);
				legend.append('text')
					.text(value.name)
					.attr('style', 'font-size:11px')
					.attr('x', 8)
					.attr('y', 4)
				k ++;
			}
		}
	},
	/**
	 *
	 * 生成椭圆
	 *
	 **/
	generateEllipseData:function(d, count)
	{
		if (typeof(count) == 'undefined') {
			count = 200;
		}

		var rad = 4 * Math.PI / count;

		var n = d3.range(1, count);
		return n.map(function(j, i){
			return [
				d.cx + d.c11 * Math.cos(rad * i) + d.c12 * Math.sin(rad * i),
				d.cy + d.c21 * Math.cos(rad * i) + d.c22 * Math.sin(rad * i)
			];
		});
	},
	/**
	 * 生成箭头
	 *
	 **/
	drawArrow:function(svg, params)
	{
		var defs = svg.append("defs");
		if (typeof(params) != 'undefined' && typeof(params.colors) != 'undefined') {
			for (var i in params.colors) {
				var arrowMarker = defs.append("marker")  
				.attr("id",params.colors[i].replace(/#/,''))  
				.attr("markerUnits","strokeWidth")  
				.attr("markerWidth","12")  
				.attr("markerHeight","12")  
				.attr("viewBox","0 0 12 12")   
				.attr("refX","6")  
				.attr("refY","6")  
				.attr("orient","auto");
			  
				var arrow_path = "M2,2 L10,6 L2,10 L6,6 L2,2";  
										  
				arrowMarker.append("path")  
					.attr("d",arrow_path)  
					.attr("fill",params.colors[i]);
			}
		} else {
			var arrowMarker = defs.append("marker")  
				.attr("id","arrow")  
				.attr("markerUnits","strokeWidth")  
				.attr("markerWidth","12")  
				.attr("markerHeight","12")  
				.attr("viewBox","0 0 12 12")   
				.attr("refX","6")  
				.attr("refY","6")  
				.attr("orient","auto");
			  
			var arrow_path = "M2,2 L10,6 L2,10 L6,6 L2,2";  
									  
			arrowMarker.append("path")  
				.attr("d",arrow_path)  
				.attr("fill","#000");
		}
		//使用方式，在线条上加箭头

		//.attr('marker-end', 'url(#arrow)');
	},
	/**
	 * 生成图标(symbol)
	 * 
	 *
	 **/
	drawSymbol:function(params)
	{
		var symbols = ["circle", "triangle-up", "triangle-down", "square", "diamond", "cross"];
		var shape_size = 60;
		if (typeof(params) != 'undefined' && typeof(params.shape_size) != 'undefined') {
			shape_size = params.shape_size;
		}

		// 符号生成器
		var shape = d3.svg.symbol().size(shape_size);

		return shape;
		
		// 画对应的图标
		/*svg.append('path')
			.attr('class', 'test-symbol')
			.attr('d', shape.type('cross'))
			.attr('transform', 'translate(20,20)');*/
	}
}

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

 

 

 

 

 

 

 

风/xin云
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
d3js绘制y坐标轴_D3.js系列——比例尺和坐标轴
weixin_33278498的博客
02-15 844
比例尺是 D3 中很重要的一个概念。绘制图形时直接用数值的大小来代表像素不是一种好方法，本章正是要解决此问题。一、为什么需要比例尺上一章制作了一个柱形图，当时有一个数组，绘图时，直接使用 250 给矩形的宽度赋值，即矩形的宽度就是 250 个像素。此方式非常具有局限性，如果数值过大或过小，例如：var dataset_1 = [ 2.5 , 2.1 , 1.7 , 1.3 , 0.9];var d...
stats:计算纯JS中数据样本的置信区间
05-09
统计资料 计算纯JS中数据样本的置信区间 屏幕截图 菜单： 置信区间： 数值分析fns：
【D3.js数据可视化系列教程】（三十二）-- 力导向图之弧形箭头连线
司机大傻
11-06 1万+
弧形箭头连线
SVG常用的属性
weixin_41897680的博客
03-31 2975
svg常用的属性
three.js 实现管道流动特效
做GIS梦的人
09-23 5895
three.js 实现管道流动特效 想在系统里实现在管道上指示水或液体的流向，在网上查阅了很多资料，也是经历的比较多的麻烦。网上部分代码不可用，还有一部分代码使用定时器实现，流动效果比较卡段这里给大家分享一下。 文章目录three.js 实现管道流动特效环境准备代码展示效果展示注意 环境准备 基于vue的环境准备，可以参考我之前的博文 基于管道体模型的加载，可以参考这篇使用Three.js 展示管道体TubeGeometry 代码展示 <template> <div id="a
D3.js实现散点图和气泡图的方法详解
10-21
使用D3.js创建的散点图和气泡图不仅外观美观，而且通过提供交互式功能（如缩放、拖动、悬停提示等），可以让图表变得更加生动和具有吸引力。创建这些图表的过程，不仅仅是绘制元素，还包括了深入理解数据结构和可视...
D3.js(v3)+react 实现带坐标与比例尺的散点图 (V3版本)
10-17
在本教程中，我们将探讨如何使用D3.js(v3)库和React框架来创建一个带坐标轴和比例尺的散点图。散点图是一种常用的数据可视化工具，它通过在两个坐标轴上显示数据点来展示数据之间的关系。在这个V3版本的实现中，我们...
D3_demo:D3.js绘制的图表
05-27
散点图 (scatterChart) 折线图 (lineChart) 饼图 (pieChart) 雷达图 (radarChart) 矩形树状图 (treeMapChart) 树图 (treeChart) 封闭图 (enclosureChart) 漏斗图 (funnelChart) 地图 (map) 力图 (force) 河流图 ...
D3 v4.x入门（1-10）—— 直方图简介和实现
我不是水哥
08-14 1047
  在放直方图的源码之前我先简单介绍下直方图，一般我都不会去介绍某种可视化图形是做什么的，如果一种图形不能让你对数据一目了然的话，那一定是你选错了展示方式。但直方图的概念还是有必要说一下，以免惯性思维造成了使用上的误解。   惯性思维：直方图和柱状图差不多？好像一样~   我也是这么想的，当然D3不会那么傻，实际上很好区分，柱状图表示散列点的数值展示，而直方图，表示的是某一区间的数据之和的...
Threejs—BIM管道流向动态效果
BIM树洞的博客
03-11 2201
Threejs—BIM管道流向动态效果Threejs—BIM管道流向动态效果 Threejs—BIM管道流向动态效果 BIM管道流向主要是描述管道内液体流动方向的一个业务场景， 在BIM管道分析展示中一个比较常用的场景，这次基于threejs的纹理流动，实现一版效果，主要如下： 原理很简单就是借助TubeGeometry，配合MeshPhongMaterial材质，在设置texture 的时候，给一个循环函数，让纹理的offset（偏移）每次都递增，就可以达到感觉有一个流动的特效。 // 此部分为了展示为
【d3.js学习--02】画移动箭头
corner2030的博客
09-28 1362
常常需要画鼠标左右移动箭头。 下面是需要画一个点击箭头可以显示前一天/一月，或者点击向后箭头可以显示向后一天/一月的信息。 当点击向后箭头时，最后一天超过今天时， 显示最近一月的数据。同时隐藏向右箭头。//arrow to select preday/nextday/premonth/nextmonth var graph_width = $("#graph").width(); var mar
d3.js——箭头的绘制
Selina_Chan的博客
05-09 1万+
首先我们要明白如何在svg中进行箭头的绘制： 先写一对，里面再写一对，其中marker的属性意义为： viewBox 坐标系的区域 refX, refY 在 viewBox 内的基准点，绘制时此点在直线端点上（要注意大小写） markerUnits 标识大小的基准，有两个值：strokeWidth（线的宽度）和userSpaceOnUse（图形最前端的
利用d3.js力导布局绘制资源拓扑图实例教程
hsany330的专栏
05-28 2055
最近公司业务服务老出bug，各路大佬盯着链路图找问题找的头昏眼花。某天大佬丢了一张图过来“我们做一个资源拓扑图吧，方便大家找bug”。 就是这个图，应该是马爸爸家的 好吧，来仔细瞧瞧这个需求咋整呢。一圈资源围着一个中心的一个应用，用曲线连接起来，曲线中段记有应用与资源间的调用信息。emmm 这个看起来很像女神在遛一群舔狗... 啊不，是 d3.js 力导向图！ d3.js 力导向图 d3.js 是著名的数据可视化基础工具，他提供了基本的将数据映射至网页元素的能力，同时封装了大量实用的数据操作函数
d3.js随机取多个整数_使用D3.js的多个区域图
culiao9310的博客
09-29 363
d3.js随机取多个整数View demo 查看演示Download Source 下载源The D3.js website describes itself as “a JavaScript library for manipulating documents based on data.” It is but one of many in the eve...
ThreeJs技术交流（2）——箭头、标语等流动特效
homula123的博客
11-16 6891
ThreeJs闲暇论——箭头、标语等流动特效写在前面效果演示如何实现结束语 写在前面 好久没写文章了，最近趁休息在家无聊有时间再来写点东西。前段时间有朋友问我一个效果怎么做。他也是看了CSDN上一位大神发的3D智能机房的示例，其中有一个演示如下： 图片来源于https://blog.csdn.net/ALLENJIAO/article/details/77775043。原作中展示的是空调风向的流...
three.js线条材质和动态流动效果
weixin_43842660的博客
07-31 1万+
线看效果
D3.js学习笔记（一）
u012846041的专栏
10-08 268
D3.js学习资源： http://wiki.jikexueyuan.com/project/d3wiki/introduction.html 极客学院关于D3.js的系列文章； http://d3.decembercafe.org/ http://www.ourd3js.com/wordpress/ D3 3.x版本API:https://github.com/d3/d3-3.x-api...
置信区间、置信水平、边际误差
热门推荐
06-24 3万+
假设 真实比例为 pp，取值范围为 0∼10\sim 1， 观测到的比例（如抽样）的比例为 p̂ \hat p（在统计理论中通常使用“帽子”也标志某数据的估值） 边际误差为 ϵ\epsilon 所要求解的问题是：真实的比例 pp 落在置信区间 [p̂ −ϵ,p̂ +ϵ]\left[\hat p-\epsilon, \hat p+\epsilon\right] 的概率。落在置信区间的标准通用采用 95
D3.js创建力导向图(V4)
atu1111的博客
11-28 1690
D3.js创建力导向图(V4)   本文借鉴：https://blog.csdn.net/juzipidemimi/article/details/100787059   创建一个力导向图需要三个东西： 仿真模拟系统 节点 力   仿真模拟系统中存在多个节点和多种类型的力，通过力控制节点的运动，每个节点都在多个力的作用下不断发生移动，直到系统趋于平衡。中间会发生多次tick事件，每次tick，仿真系统都会更新节点的位置，且系统的能量(alpha)也会逐渐降低，直到达到某个数值(alphaMin)，整个图
plt.subplots绘制散点图做出缩放
最新发布
07-03
在Python的matplotlib库中，`plt.subplots()`函数主要用于创建子图，并可以用来绘制散点图（scatter plot）。如果你想要对生成的散点图进行缩放，通常可以在绘图后设置x轴和y轴的范围，例如使用`xlim()`和`ylim()`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值