2 min to read

d3.js入门

语法

选择元素

d3.select()

d3.selectAll()

插入元素

append()：在选择集尾部插入元素

insert()：在选择集前面插入元素

绑定数据

data()：将一个数组绑定到选择集上，数组各项和选择集各元素一一对应

datum()

比例尺

一种映射关系，从domain映射到range域。

var scaleLinear = d3.scaleLinear()
	.domain([10,50])
	.range([0,300]);

实战

入门

新建new.html文件

<!DOCTYPE html>
<html>
  <head>
    <title>testD3_chp10_1.html</title>
    <script type="text/javascript" src="http://d3js.org/d3.v5.min.js">
    </script>
    <meta name="keywords" content="keyword1,keyword2,keyword3">
    <meta name="description" content="this is my page">
    <meta name="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

  </head>
    <body>
        <svg width="960" height="600"></svg>
    </body>
</html>

在chrome中打开new.html文件，按F12进入console控制台。

在控制台输入

var marge = {top:60,bottom:60,left:60,right:60}//设置边距
var dataset = [ 250 , 210 , 170 , 130 , 90 ];  //数据（表示矩形的宽度）
var svg = d3.select("svg");//得到svg画布
var g = svg.append("g")//定义一个用来装整个图表的一个分组，并设置他的位置
	.attr("transform","translate("+marge.top+","+marge.left+")");

var rectHeight = 30;//设置每一个矩形的高度
g.selectAll("rect")
	.data(dataset)
	.enter()
	.append("rect")
	.attr("x",20)//设置左上点的x
	.attr("y",function(d,i){//设置左上点的y
		return i*rectHeight;
	})
	.attr("width",function(d){//设置宽
		return d;
	})
	.attr("height",rectHeight-5)//设置长
	.attr("fill","yellow");//颜色填充
svg.selectAll("g").remove()  #清空g元素

深入

安装Node.js之后，就可以搭建http-server模块了。与Python简易HTTP服务器类似，通过该模块，可以从任意的文件夹快速启动一个轻量级的HTTP服务器。

npm install http-server –g   #命令中的-g参数会把http-server模块设置为全局的，这样你就可以在命令行里直接使用http-server命令。
http-server .  #启动服务器

参考资料

[01]. D3.js的v5版本入门教程（前篇）—— 关于

[02]. Over 1000 D3.js Examples and Demos