首页 > 代码库 > d3.js学习1

d3.js学习1

官网:


http://d3js.org/

范例:


 

https://github.com/mbostock/d3/wiki/Gallery

引用:


 

//在线引用<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>//或下载到本地<head>	<meta charset="utf-8">	<title>D3.js galance</title>	<script src="http://www.mamicode.com/d3.min.js"></script></head>

开始:


<body>    <p id=‘target‘></p>    <script type="text/javascript">        d3.select("p#target").text("Hello World!");    </script></body>    

d3.select实现单个元素选取

select.attr,读取/设置元素属性


 

<p id=‘target‘></p><script type="text/javascript">	var res=d3.select("p#target").attr("id");	document.write(res);</script>//结果为target
<p></p><script type="text/javascript">	d3.select("p").attr("id","p1");	var res=d3.select("p").attr("id");	document.write(res);</script>//将p的id设为p1,并输出p的id

select.classed,添加/删除元素类


<p class="p1"></p><script type="text/javascript">	var res=d3.select("p").classed("p1");	document.write(res);</script>//检测该元素是否属于p1类,返回布尔值
<p></p><script type="text/javascript">	var res=d3.select("p").classed("p1",true);</script>//为P标签添加p1这个类
<p class="p1"></p><script type="text/javascript">	d3.select("p").classed("p1",function(){return false;});	var res=d3.select("p").classed("p1");	document.write(res);</script>
//为P标签移除p1这个类

  

 

d3.js学习1