D3.JS 基于javascript的图表展示库<二>----基本元素操作

最新推荐文章于 2013-09-24 16:04:20 发布

ec_huyinghuan

最新推荐文章于 2013-09-24 16:04:20 发布

阅读量5.6k

点赞数 2

分类专栏： d3.js

本文链接：https://blog.csdn.net/a6383277/article/details/8683421

版权

d3.js 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

参考 http://d3js.org/

d3的元素操作有点类似jquery,废话多少，直接上代码：

ps:html代码中引用了d3.js的库，所以自己测试的时候也需要注意引用的d3.js文件是否存在于相应位置。如没有特别指明，默认每个html中都需要引入d3.js

d3选择器

基本选择方法 selectAll ,select

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Seletor</title>
<script type="text/javascript" src="lib/d3.v3.js"></script>
<script type="text/javascript">
	//d3选择器的默认的根节点是body元素 
	//d3的选择器语法 采用css选择器同样的语法
	function  selectFirst(){
		/*
		选择body下的所有子元素p元素，给它里面的字颜色设置为白色
		注意看到div下的p中文本也变白色了，
		所以selectAll 默认是选择某个节点下的所有子元素（包括间接子元素）
		*/
		d3.selectAll("p").style("color", "white");
		/*
			select 为选择某个节点，如果符合条件的节点有多个，则默认选择第一个。
		*/
		d3.select("body").style("background-color", "gray");//选择body元素设为色背灰景
		/*
			选择div，给它的内容设置为ABC,可以看到自由第一个DIV的内容变ABC了，其他无变化
			有关select()下有哪些函数，如html()等可以自行参考官方API
			https://github.com/mbostock/d3/wiki/Selections
		*/
		d3.select("div").html("ABC"); 
		
		//类似CSS的选择规则
		d3.select("div#selectorID").html("selectorID");
		d3.select("div.selectorClass").html("selectorClass"); //或者d3.select(".selectorClass").html("selectorClass");
		
		//select,selectAll组合使用，这个是经常使用的。
		//选择#mix元素下所有的p元素给文本字体大小设置为36
		d3.select("#mix").selectAll("span").style("font-size","24px");
	}
	
	window.onload = selectFirst;
</script>
</head>
<body>	
	<pre>Code:
	d3.selectAll("p").style("color", "white");
Demo:
	</pre>
	<p>A</p>
	<p>B</p>
	<p>C</p>
	<p>D</p>
	<p>E</p>
	<p>F</p>
	================================<br />
	<pre>Code:
	d3.select("div").html("ABC");
Demo:</pre>
	<div>select</div>
	<div>select</div>
	<div>select</div>
	<div><p>G</p></div>
	================================<br />
	<pre>Code:
		d3.select("div#selectorID").html("selectorID");
		d3.select("div.selectorClass").html("selectorClass");
Demo:</pre><br/>
	<div id="selectorID"></div>
	<div class="selectorClass"></div>
	================================<br />
	<pre>Code:
	d3.select("#mix").selectAll("span").style("font-size","24px");
Demo:</pre>
	<div id="mix">		
		<span>A</span>
		<span>B</span>
		<span>C</span>
		<span>D</span>
		<span>E</span>
		<span>F</span>	
	</div>
</body>
</html>

下一篇基础数据绑定介绍

ec_huyinghuan

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
D3.JS 基于javascript的图表展示库<二>----基本元素操作

参考 http://d3js.org/d3的元素操作有点类似jquery,废话多少，直接上代码：ps:html代码中引用了d3.js的库，所以自己测试的时候也需要注意引用的d3.js文件是否存在于相应位置。如没有特别指明，默认每个html中都需要引入d3.jsd3选择器基本选择方法 selectAll ,selectSeletor //d3选择器的默
复制链接

扫一扫