01|如何用D3.js建一个简单的折线图

Step1

新建一个文件夹linechart，里面新建一个HTML页面命名linechart；一个css文件夹，里面建一个样式表style.css;一个js文件夹，里面健一个js文件index.js；所有文件名可以根据自己习惯更改。

Step2

在html页面head标签引入外部样式表。

<link rel="stylesheet" href="css/style.css" media="screen" type="text/css"/>

Step3

我在链接样式表的时候，觉得找文件路径很费劲，也不知道对不对。找到一个很好的检验方式，在body标签中加上这段代码

<a href="css/style.css">样式</a>

就可以直接点击链接，查看是不是对应的样式表了，js文件也可以这么操作。

Step4

在body标签中，设置一个图表容器，写一个div，id=“container”，然后在css里定义容器样式。

#container{
background:#ddd;
width:500;
height:250;
}

Step5

在body里最后面，链接D3,和本地自己的js文件。

<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="js/index.js"></script>

Step6

在js里，select选择刚刚建立好的div容器的id，用append建一个svg画布，并设置hight和weight两个变量。

//svg
var svg = d3.select("#container")
.append("svg")

Step7 完整的js代码

var width =500,
height =250,
margin = {left:50,top:30,right:20,bottom:20},
g_width = width-margin.left-margin.right,
g_height = height-margin.top-margin.bottom;
//svg
var svg = d3.select("#container")
.append("svg")
//width,height
.attr("width",width)//attribute
.attr("height",height)
var g = d3.select("svg")
.append("g")
.attr("transform","translate(" + margin.left + "," + margin.top + ")")
var data =[1,3,5,7,8,4,3,7]
var scale_x = d3.scaleLinear()
    .domain([0, data.length-1])
    .range([0,g_width])
var scale_y = d3.scaleLinear()
    .domain([0, d3.max(data)])
    .range([g_height,0])
var line_generateor = d3.line()
    .x(function(d,i){ return scale_x(i);})//0,1,2,3
    .y(function(d){ return scale_y(d);})//1,3,5
    .curve(d3.curveCardinal)
d3.select("g")
.append("path")
.attr("d",line_generateor(data))//d="M1,0L20"
//x
var x_axis = d3.axisBottom(scale_x);
var y_axis = d3.axisLeft(scale_y);
g.append("g")
.call(x_axis)
.attr('transform','translate(0,'+g_height+')')
//y
g.append("g")
.call(y_axis)
.append("text")
.text('Price($)')
.attr("transform","rotate(-90)")//旋转
.attr("text-anchor","end")//与末端对齐
.attr("dy","1em")

最后编辑于：2018.01.28 14:28:06