d3.js绘制【临近坐标图/区域图】

最新推荐文章于 2022-04-16 20:34:28 发布
最新推荐文章于 2022-04-16 20:34:28 发布
阅读量155 收藏 1
点赞数
分类专栏： D3 文章标签： 临近坐标图 区域图 曲线图
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhouyonggo/article/details/82624676
版权

实现如下效果：

临近坐标图/区域图
一、json数据：
 

{
	"data": [[100.00,92.24,84.47,76.71,68.95,61.18,53.42,46.81,40.10,29.00,13.33]],
	"categories": [0,10,20,30,40,50,60, 70, 80, 90, 100],
	"area_data":[
		{"value":[100.000,88.760,77.520,66.290,55.050,43.810,34.440,28.430,21.330,10.000,3.333], "other_value":[100.00,95.08,90.17,85.25,80.33,75.42,70.50,65.71,59.24,47.52,30.00], "color": "#388E3C", "opacity": 0.7}
	],
	"marker":{
		"cross":[
			{"value":[  81.36 ,40] ,"h_step_start":10.17, "h_step_end":10.17, "v_step_start":16.67, "v_step_end":16.67,"desc":"12926.5 ( 81.36 ,40 )"}
		]
	},
	
	"params":{
		"title":"临近坐标图标题测试",
		"x_label":"x轴测试",
		"y_label":"y轴测试",
		"drag_label":"AUC:56.7%",
		
		"colors":["#000"],
		"show_grid":true,
		"show_cross":true,
		"show_area":true
	},
	"size":{
		"width":800,
		"height":600
	}
}

参数说明：

  • *data:线条，二维数组
  • *categories:x轴刻度,需要数值型
  • area_data:智信区间的内容, cross[value:中心点, h_step_start:水平右面步长, h_step_end:水平左面步长, v_step_start:垂直下面步长, v_step_end:垂直上面步长,desc:鼠标放十字架上的提示框]
  • marker:包含十字架的内容
  • title:标题
  • x_label:x轴标签
  • y_label:y轴标签
  • drag_label:可以拖拽的文字
  • colors:线条颜色
  • show_grid:false| true, 是否显示网格线
  • show_cross:false| true, 是否显示十字架
  • show_area:false| true, 是否显示智信区间


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

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

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

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

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

var graph = {
	/**
	 * 临近坐标图(区域+line+mark)
	 *
	 * @return    void
	 **/

	areaLine(container, content)
	{
		d3.select('#'+container).select('svg').remove();
		d3.select('body').select('.arealine_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  = content.size.width;
		var height = content.size.height;

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

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

		// 计算最大值、最小值
		var max_ys = new Array();
		var min_ys = new Array();
	
		for (var i in content.data) {
			max_ys.push(d3.max(content.data[i]));
			min_ys.push(d3.min(content.data[i]));
		}

		if (typeof(content.area_data) != 'undefined') {
			for (var i in content.area_data) {
				min_ys.push(d3.min(content.area_data[i].value));
				min_ys.push(d3.min(content.area_data[i].other_value));
				max_ys.push(d3.max(content.area_data[i].other_value));
				max_ys.push(d3.max(content.area_data[i].other_value));
			}
		}

		var max_y = d3.max(max_ys);
		var min_y = d3.min(min_ys);

		console.log(min_ys, max_ys);

		if (min_y >= 0) {
			min_y -= min_y/2;
		} else {
			min_y += min_y/2;
		}

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

		// 计算x的轴刻度值
		var categories = content.categories;

		/*for (var i in content.data[0]){
			categories.push(parseInt(i));
		}*/

		// 定义x,y比例尺
		var x_scale = d3.scale.linear()
			.domain([d3.max(categories),d3.min(categories)])
			.range([0, grid_width]);

		var y_scale = d3.scale.linear()
			.domain([max_y,min_y])
			.range([0, grid_height]);


		// 定义x,y坐标轴
		var x_axis = d3.svg.axis()
			.scale(x_scale)
			.orient('bottom')
			.outerTickSize(0);

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

		var line = d3.svg.line()
			.x(function(d,i) {
				return x_scale(categories[i]);
			})
			.y(function(d) {
				return y_scale(d);
			});
		

		//开始绘图

		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 main = svg.append('g')
			.attr('class', 'main')
			.attr('transform','translate('+margin.left+', '+margin.top+')');

		var xaxis_obj = main.append('g')
			.attr('class', 'axis xaxis')
			.call(x_axis)
			.attr('transform', 'translate(0, '+grid_height+')');

		var yaxis_obj = main.append('g')
			.attr('class', 'axis yaxis')
			.call(y_axis);

		var xtick_values = x_scale.ticks();
		var ytick_values = y_scale.ticks();

		d3.select('.xaxis').selectAll('.tick').each(function() {
			xtick_values.push(d3.select);
		});

		// 是否显示网格线
		if (typeof(content.params.show_grid) != 'undefined' && content.params.show_grid == true) {
			var helplines = main.append('g')
				.attr('class','helplines');

			var y_helpers = helplines.append('g').attr('class', 'y_helps').selectAll('.helpline')
				.data(ytick_values)
				.enter()
				.append('line')
				.attr('class', 'helpline')
				.attr('x1', function() {
					return x_scale(d3.min(xtick_values));
				})
				.attr('y1', function(d) {
					return y_scale(d);
				})
				.attr('x2', function() {
					return x_scale(d3.max(categories));
				})
				.attr('y2', function(d) {
					console.log(graph.getAngle(x_scale(d3.min(xtick_values)),y_scale(d),x_scale(d3.max(categories)),y_scale(d)));
					return y_scale(d);

				});

				

			d3.selectAll('.helplines').selectAll('.helpline').attr('stroke', '#ccc').attr('stroke-dasharray', '5,5');
		}

		//绘制背景
		var bg_obj = main.append('g').attr('class','bg');

			bg_obj.append('rect')
				.attr('width',grid_width)
				.attr('height', grid_height)
				.attr('stroke', '#000')
				.attr('fill', 'none');

			bg_obj.append('line')
				.attr('x1', function() {
					return x_scale(d3.max(categories));
				})
				.attr('y1', function() {
					return y_scale(min_y);
				})
				.attr('x2', function() {
					return x_scale(0);
				})
				.attr('y2', function() {
					return y_scale(max_y);
				})
				.attr('stroke', '#ccc');

		

		if (typeof(content.params.show_area) != 'undefined' && content.params.show_area === true && typeof(content.area_data) != 'undefined'){
		
			// 画区域
			var areas_obj = main.append('g')
				.attr('class', 'area_group')
				.selectAll('.areas')
				.data(content.area_data)
				.enter()
				.append('path')
				.attr('class', 'areas')
				.attr('d', function(d) {
					return graph.drawArea(d,x_scale, y_scale,categories);
				})
				.attr('stroke', function(d) {
					return d.color;
				})
				.attr('fill', function(d) {
					return d.color;
				})
				.attr('fill-opacity', function(d) {
					return d.opacity;
				});
		}

		var line_obj = main.append('g')
			.attr('class', 'line_group')
			.selectAll('.lines')
			.data(content.data)
			.enter()
			.append('path')
			.attr('class', 'lines')
			.attr('d', function(d) {
				return line(d);
			})
			.attr('stroke', function(d, i) {
				return typeof(content.params.colors) != 'undefined' ? content.params.colors[i%content.params.colors.length] : colors[i%colors.length];
			})
			.attr('stroke-width',2)
			.attr('fill', 'none');

		// 创建提示框
		var tooltip = this.createTip();

		var circle_group = main.append('g').attr('class', 'circle_group');
		
		var circle_obj = circle_group.selectAll('.circles')
			.data(content.data)
			.enter()
			.append('g')
			.attr('class', 'circles')
			.each(function(d,i) {
				var self = d3.select(this);
				self.selectAll('.circle_'+i)
					.data(d)
					.enter()
					.append('circle')
					.attr('class', 'circle_'+i)
					.attr('cx', function(dd,ii) {
						return x_scale(categories[ii]);
					})
					.attr('cy', function(dd, ii) {
						return y_scale(dd);
					})
					.attr('r', 5)
					.attr('fill', '#000')
					.attr('fill-opacity', 0.0)
					.on('mouseover', function(d,i) {
						var circle_obj = d3.select(this);
						var page_x     = d3.event.pageX;
						var page_y     = d3.event.pageY+20;
						circle_obj.attr('fill-opacity', 0.7);
						tooltip.html('<b>position:</b>'+categories[i]+"</br> <b>value:</b>"+d)  
							.style("left",page_x+"px")  
							.style("top",page_y+"px")  
							.style("opacity",0.9)
							.style('padding', '5px');
					})
					.on('mouseout', function(){
						var circle_obj = d3.select(this);
						circle_obj.attr('fill-opacity', 0.0);
						tooltip.style('opacity', 0.0);
					});
			});


		// 画十字架
		if (typeof(content.marker) != 'undefined' && typeof(content.marker.cross) != '' && typeof(content.params.show_cross) != 'undefined' && content.params.show_cross === true) {
			var cross_group = main.append('g').attr('class', 'marker').append('g').attr('class', 'cross_group');

			cross_group.selectAll('.cross')
				.data(content.marker.cross)
				.enter()
				.append('g')
				.attr('class', 'cross')
				.attr('transform', function(d, i) {
					return 'rotate(0, '+x_scale(d.value[0])+','+y_scale(d.value[1])+')';
				})
				.each(function(d) {
					var self = d3.select(this);
					self.append('line')
						.attr('class', 'cross_v')
						.attr('x1', function(d, i) {
							return x_scale(d.value[0]);
						})
						.attr('y1', function(d){
							return y_scale(d.value[1]+d.v_step_start);
						})
						.attr('x2', function(d) {
							return x_scale(d.value[0]);
						})
						.attr('y2', function(d) {
							return y_scale(d.value[1] - d.v_step_end);
						})
						.attr('stroke', '#000');
					self.append('line')
						.attr('class', 'cross_v_start')
						.attr('x1', function(d, i) {
							return x_scale(d.value[0])-4;
						})
						.attr('y1', function(d){
							return y_scale(d.value[1]+d.v_step_start);
						})
						.attr('x2', function(d) {
							return x_scale(d.value[0])+4;
						})
						.attr('y2', function(d) {
							return y_scale(d.value[1]+d.v_step_start);
						})
						.attr('stroke', '#000');
					self.append('line')
						.attr('class', 'cross_v_end')
						.attr('x1', function(d, i) {
							return x_scale(d.value[0])-4;
						})
						.attr('y1', function(d){
							return y_scale(d.value[1]-d.v_step_end);
						})
						.attr('x2', function(d) {
							return x_scale(d.value[0])+4;
						})
						.attr('y2', function(d) {
							return y_scale(d.value[1]-d.v_step_end);
						})
						.attr('stroke', '#000');

					self.append('line')
						.attr('class', 'cross_h')
						.attr('x1', function(d, i) {
							return x_scale(d.value[0]-d.h_step_start);
						})
						.attr('y1', function(d){
							return y_scale(d.value[1]);
						})
						.attr('x2', function(d) {
							return x_scale(d.value[0]+d.h_step_end);
						})
						.attr('y2', function(d) {
							return y_scale(d.value[1]);
						})
						.attr('stroke', '#000');
					self.append('line')
						.attr('class', 'cross_h_start')
						.attr('x1', function(d, i) {
							return x_scale(d.value[0]-d.h_step_start);
						})
						.attr('y1', function(d){
							return y_scale(d.value[1])-4;
						})
						.attr('x2', function(d) {
							return x_scale(d.value[0]-d.h_step_start);
						})
						.attr('y2', function(d) {
							return y_scale(d.value[1])+4;
						})
						.attr('stroke', '#000');
					self.append('line')
						.attr('class', 'cross_h_end')
						.attr('x1', function(d, i) {
							return x_scale(d.value[0]+d.h_step_end);
						})
						.attr('y1', function(d){
							return y_scale(d.value[1])-4;
						})
						.attr('x2', function(d) {
							return x_scale(d.value[0]+d.h_step_end);
						})
						.attr('y2', function(d) {
							return y_scale(d.value[1])+4;
						})
						.attr('stroke', '#000');
					
				})
				.on('mouseover', function(d) {
					var self = d3.select(this);
					var page_x     = d3.event.pageX;
						var page_y     = d3.event.pageY+20;
						circle_obj.attr('fill-opacity', 0.7);
						tooltip.html('<b>Description:</b>'+d.desc)  
							.style("left",page_x+"px")  
							.style("top",page_y+"px")  
							.style("opacity",0.9)
							.style('padding', '5px');
				})
				.on('mouseout', function() {
					tooltip.style('opacity', 0.0);
				});

                //去掉定时旋转，
			//setInterval(function() {
				d3.selectAll('.cross').each(function() {
					var self = d3.select(this);
					var rotate = self.attr('transform');
					rotate = rotate.replace(/rotate\(/, '');
					rotate = rotate.replace(/\)/, '');
					var rotates = rotate.split(',');
					var angle = parseInt(rotates[0]) + 10;
					if (angle == 360) {
						angle = 0;
					}
                //去掉倾斜角度
					//self.attr('transform', 'rotate('+angle+', '+rotates[1]+', '+rotates[2]+')');
				});
			//}, 10000);
		}

		
		// 赋x,y刻度样式

		d3.selectAll('.axis').selectAll('line').attr('stroke', '#000').attr('style', 'font-size:11px');
		d3.selectAll('.axis').selectAll('path').attr('stroke', '#000').attr('style', 'font-size:11px').attr('fill', 'none');


		var move_label = typeof(content.params.drag_label) != 'undefined' ? content.params.drag_label: '';
		var move_x = width/2;
		var move_y = grid_height + margin.top - 20;

		if (move_label != '') {
			var drag = this.createMove();
			console.log(drag);
			svg.append('text').text(move_label).attr('x', move_x).attr('y',move_y).attr('style', 'font-weight:bold;font-size:12px;cursor:pointer').call(drag);
		}
		var title = typeof(content.params.title) != 'undefined' ? content.params.title : '';
		var title_per_width = 1;
		if (title != '') {
			var title_x = (width - title.length * title_per_width) /2;
			svg.append('text').text(title).attr('text-anchor', 'middle').attr('x', title_x).attr('y', margin.top/2);
		}

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

		if (x_label != '') {
			var x_label_x = width/2 - x_label.length;
			svg.append('text').text(x_label).attr('text-anchor', 'middle').attr('x', x_label_x).attr('y', height - margin.bottom/4).attr('style', 'font-size:11px');
		}

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

		if (y_label != '') {
			var y_label_x = height/2 - x_label.length;
			svg.append('text').text(y_label).attr('text-anchor', 'middle').attr('x', -y_label_x).attr('y', margin.left/4).attr('transform', 'rotate(-90)').attr('style', 'font-size:11px');
		}

		
	},
	/**
	 *
	 * 画区域
	 **/
	drawArea:function(data, x_scale, y_scale, categories)
	{
		var y0_data = data['value'];
		var y1_data = data['other_value'];

		var area = d3.svg.area()
			.x(function(d,i) {
				return x_scale(categories[i])
			})
			.y0(function(d, i) {
				return y_scale(d);
			})
			.y1(function(d, i) {
				return y_scale(y1_data[i]);
			});
		return area(y0_data);
	},
	/**
	 *
	 * 创建移动事件
	 **/
	createMove:function()
	{
		// 定义拖拽事件
		var drag = d3.behavior.drag()  
            .on("drag",dragmove)

		function dragmove(d){
			d3.select(this)  
				.attr("x", d3.event.x)  
				.attr("y", d3.event.y);
		}

		return drag;
	},
	/**
	 *
	 * 创建提示框
	 **/
	createTip:function()
	{
		var tooltip = d3.select("body").append("div")  
			.attr("class","arealine_tooltip")
			.attr("opacity",0.0);

		return tooltip;
	},
	getAngle:function(x1,y1,x2,y2)
	{
		var x = Math.abs(x1 - x2);
		var y = Math.abs(y1 - y2);

		// 斜边长
		var z = Math.sqrt(Math.pow(x,2)+Math.pow(y,2));
		
		// 余弦

		var cos = y/z;

		//弧度

		var radina = Math.acos(cos);

		//角度

		var angle = 180/ (Math.PI/ radina);

		return angle;

	}
};

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

 

 

 

 

 

 

 

风/xin云
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
d3.js绘制多组区域分布图
zhouyonggo的专栏
09-12 238
实现如下效果： 一、json数据： { "data": [[11, 35, 23, 78, 55, 18, 98, 100, 22, 65,65,65,65,11],[11, 35, 23, 78, 55, 18, 98, 100, 22, 65,65,65,65,11],[11, 35, 23, 78, 55, 18, 98, 100, 22, 65,65,65,65,11],[11,...
用d3绘制区间图，组合图
a_a_zy的博客
06-08 261
用d3绘制区间图（散点、柱状组合图）
d3.js服务器json文件,由D3.js中的json文件堆积的区域图(stacked area graph by json file in D3.js)...
weixin_34401781的博客
08-05 272
由D3.js中的json文件堆积的区域图(stacked area graph by json file in D3.js)有没有人知道由json文件构建的D3.js图(堆积区域图)的任何示例。 我发现的所有内容都基于tsv或csv。谢谢，Does any one know any example in which the D3.js graphs (stacked area graphs) bu...
d3.js随机取多个整数_使用D3.js的多个区域图
culiao9310的博客
09-29 360
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...
数据可视化【六】Line Chart && Area Chart
T_T233333333的博客
08-18 738
Line Chart vizhub代码： https://vizhub.com/Edward-Elric233/094396fc7a164c828a4a8c2e13045308 实现效果： 这里先使用d3.line()设置每个点的x坐标和y坐标，然后再用这个东西设置path的'd'属性，就可以得到曲线。 const lineGenerator = d3.line() .x(d => xScale(xValue(d))) .y(d => yScale(yValue(d))) .
d3.js 绘制心电图以及网格
03-09
d3.js 绘制心电图以及网格
使用D3.js库绘制曲线图
04-11
在本例中，我们将探讨如何使用D3.js来绘制曲线图。 首先，我们需要了解XML文件的作用。XML（可扩展标记语言）是一种用于存储和传输结构化数据的标准格式。在这个场景中，XML文件很可能包含了用来绘制曲线图的数据点...
利用d3.js力导布局绘制资源拓扑图实例教程
10-17
d3.js是一个强大的JavaScript库，专用于数据可视化，它提供了丰富的功能和算法，可以帮助开发者构建复杂的图表和图形。 首先，力导向图是d3.js中的一个重要特性，它用于在二维空间中展现节点和它们之间的关系。这种...
D3.js实现拓扑图的示例代码
10-18
D3.js（Data-Driven Documents）是一个强大的JavaScript库，允许开发者直接操作DOM（Document Object Model）来绑定数据并创建动态、交互式的图表。 首先，拓扑图的实现涉及到以下几个关键步骤： 1. **引入D3.js库...
graph-d3:使用 D3.js 绘制众神图
06-14
使用 D3.js 绘制众神图 The Graph of the Gods 的可视化，以为例，通过从图数据库中获取。 要使用 Gremlin 以 JSON 格式提取图形： gremlin> g = TitanFactory.open('conf/titan-berkeleydb-es.properties') ...
javascript曲线图和面积图Line & Area chart控件功能及下载
weixin_30616969的博客
05-14 148
Line & Area chart 控件是一款新型的、可用性极强的曲线图和面积图产品。一个您网站的访问者可以放大他感兴趣的一段区域，打开和关闭数值气球，并可显示和隐藏图表。您能创建简单、堆积、100%堆积的线型图和面积图。您能自定义您图表的每一个细节，使之完全满足您的需求。 控件具体功能: 缩放 滚动 两个Y轴坐标（左边和右边） 能使用翻转的Y轴 Y轴支持线性或对数刻...
PyEcharts 直角坐标系图表之折线/面积图
w w w的博客
11-19 4028
第1关：Line：折线图（一） 任务描述 本关任务：利用 PyEcharts 绘制一个基本的折线图。 相关知识 为了完成本关任务，你需要掌握：1. Python 的基本语法，2. PyEcharts 折线图的相关内容。 导入所需包 导入折线图语句如下： from pyecharts.charts import Line 本关我们提供两组简单的数据，如下所示： x_data = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun.
D3.js 绘制地图
You_Ta的博客
02-19 6315
使用D3 V3版本绘制 绘制效果图： 准备工作： 3d立体柱状图的绘制 绘制地图思路： 绘制地图及地图投影； 根据地图地理信息将柱状图放置到指定位置； 根据scale计算出柱状图实际高度。 ...
d3js绘制y坐标轴_D3.js绘制平行坐标图
weixin_33835461的博客
02-01 575
原始数据平行坐标图body, html {margin: 0;padding: 0;width: 100%;height: 100%;}/* parcoords */#nutrients {position: fixed;bottom: 4px;height: 180px;width: 98%;padding: 8px 1% 0;border-top: 1px solid #d0d0d0;}#nu...
D3.js学习笔记（一）
u012846041的专栏
10-08 263
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...
d3js绘制y坐标轴_D3.js 几种常用的坐标轴
weixin_30334411的博客
01-17 880
D3.js 学习随便，记录几种常用的坐标轴。D3.js 比例尺，把一组输入域映射到输出域的函数，我们可以用比例尺来创建坐标轴。.domain():设置输入域，.range()设置输出域；下面以基础的线性比例尺为例解释说明一下。d3.scaleLinear 线性比例尺window.onload = function() {var width = 830,height = 800;// 初始化svgv...
js:三种简单的矩形绘制方法（画布canvas）
qq_52824207的博客
04-16 4969
之前提到过画布canvas通过lineto方法绘制矩形，实际上画布canvas还有三种其他更简便的方法绘制矩形，而lineto方法可以绘制任何直线图形 三种绘制矩形的方法分别是： rect();创建矩形路径（只生成路径） fillRect();创建填充的矩形路径（生成路径并填充） strokeRect();创建矩形路径并绘制（生成路径并绘制） 另外有一种清除矩形填充的方法（个人理解为矩形形状的橡皮擦）： clearRect() 这是之前的博客：https://blog.csdn.net/qq_
D3数据可视化要点整理（一）
Lucas_Vazquez的博客
05-26 790
D3数据可视化要点整理（一） D3选择集与数据 select：返回第一个元素 selectAll：返回所有元素 括号内的内容可以是CSS选择器，也可以是DOMAPI选择的元素（通过getElementById/ClassName获得） 选择集：选择器返回的数据 selection.empty()测空 selection.node()第一个节点 selection.size()个数 console.log：控制台输出，调试时可用 D3设定和获取属性 设定ID d3.selec
如何使用d3.js绘制地图？
最新发布
05-20
D3.js是一个非常流行的JavaScript可视化库，可以用于绘制各种图表和地图。下面是使用D3.js绘制地图的简单步骤： 1. 准备地图数据：首先需要准备好要绘制的地图数据，包括地理坐标、地图边界等。这些数据可以从在线...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值