D3学习

D3可视化数据图形
D3 能够连续不断地调用函数

使用D3:<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>或下载d3.js
1.<p>大哥</p>
  <p>二哥</p>
 <script type="text/javascript">
 var a = d3.select("body");//选择body Dom、 select是选择所有指定元素的第一个  
也可以在p标签写id和类        select("#id"),select(".class")也可以选择
 var b = a.selectAll("p");//选择body中所有p标签
 var c = b.text("我要改变你的内容了哦");
 var d = c.style("color","red");//改变颜色
 var e = d.style("font-size","30px");//改变字的大小
 e.append("p").text("能拼接上么");//在每个p后面换行拼接    在 body 的末尾添加一个 p 元素,结果为:
 </script>
2.<p>大哥</p><p>二哥</p><p>三哥</p>
//无名函数 function(d, i)
 <!--<script type="text/javascript">
 var str = "China";
 var body = d3.select("body");
 var p = body.selectAll("p");
 //绑定str元素
 p.datum(str);
 p.text(function(d, i){
     return "第 "+ i + " 个元素绑定的数据是 " + d;
 });
 </script> -->
 <script type="text/javascript">
 var dataset=["1","2","3"];
 var body = d3.select("body");
 var p = body.selectAll("p");
 //调用 data() 绑定数据,并替换三个段落元素的字符串为被绑定的字符串
 p.data(dataset)
 //d为数据dataset i为循环 初始值为0 i++
   .text(function(d, i){
       return d;
   });</script>
3.绘制的简单矩形
<svg>
       <rect></rect>
       <rect></rect>//rect表示矩形
       </svg>
   <script type="text/javascript">
   var width = 300;  //画布的宽度
   var height = 300;   //画布的高度
   var svg = d3.select("body")     //选择文档中的body元素
       .append("svg")          //添加一个svg元素
       .attr("width", width)       //设定宽度
       .attr("height", height);    //设定高度
     
       var h=25; //矩形高度 
       var w= [ 250 , 210 , 170 , 130 , 90 ];//每个矩形所占的像素长度(包括空白)
       svg.selectAll("rect")
           .data(w)
           .enter()//上面的数据占位  就是下面的d
           .append("rect")         // 有数据,而没有足够图形元素的时候,使用此方法可以添加足够的元素。
           .attr("x",20)                          // x:矩形左上角的                                   
           .attr("y",function(d,i){              // y:矩形左上角的 y
                return i * h;              //循环5次  代表有5个矩形
           })
           .attr("width",function(d){            //5个
                return d;
           })
           .attr("height",h-2)//每个矩形的间隔
           .attr("fill","steelblue");//矩形颜色
   </script>


阅读更多
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页