d3学习day1----画曲线

d3画布的基本布局如下图

实现过程如下：

先定义画图的容器的尺寸

var width = 500,
    height = 200,
    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)

再通过append()添加一个g元素，这段代码添加了两个g元素，为了比较select和selectAll

d3.select("svg").append("g")//添加第一个g
var g = d3.select("svg")
    .append("g") //添加第二个g，并把这个元素赋值给变量g
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
    //定义要画的曲线的数组data[]
var data = [2, 12, 3, 4, 5, 6, 22]

将g成比例缩放

x轴缩放

var scale_x = d3.scale.linear() //使用d3中的scale函数进行缩放，因为是线性的所以使用linear
    .domain([0, data.length - 1]) //domain定义输入范围
    .range([0, g_width]) //range（）定义输出范围

y轴缩放

var scale_y = d3.scale.linear()
    .domain([0, d3.max(data)]) //domain定义输入范围
    .range([0, g_height]) //range（）定义输出范围

通过d3下面的svg下面的line()实现line_generator函数

var line_generator = d3.svg.line()
    .x(function(d, i) { return scale_x(i); }) //x坐标点的值为data数组的下标，参数d表示传进来的数据，i表示下标
    .y(function(d) { return scale_y(d) }) //y坐标的值为数组中实际的每一项的值
    .interpolate("cardinal") //让线条变得光滑，不是折线而是光滑的曲线

// d3.select("g")
//     .append("path")
//     .attr("d", line_generator(data)) //通过d属性值，添加line_generator函数
//     // 其实d就是 path-data 的缩写，d= "M"

当页面有多个相同元素，select只能选择符合条件的第一个元素，想要选择其中某一个指定的元素，可以把那个元素赋给一个变量，然后使用变量名去实现

如下所示，g表示上面赋值的那个变量g,而不是标签<g></g>

而selectAll选中的是页面中所有的元素

g.append("path").attr("d", line_generator(data)) 
//通过d属性值，添加line_generator函数
// 其实d就是 path-data 的缩写，d= "M0,2Q0.7999999999999999,11.9,1,12C1.3,12.15,1.7,4.2,2,3S2.7,3.7,3,4S3.7,4.7,4,5S4.7,3.4499999999999997,5,6Q5.2,7.7,6,22"

没有缩放的初始图

加缩放后的效果

缩放代码：将<g></g>成比例缩放

var scale_x = d3.scale.linear() //使用d3中的scale函数进行缩放，因为是线性的所以使用linear
    .domain([0, data.length - 1]) //domain定义输入范围
    .range([0, g_width]) //range（）定义输出范围

var scale_y = d3.scale.linear()
    .domain([0, d3.max(data)]) //domain定义输入范围
    .range([0, g_height]) //range（）定义输出范围

给path设置css后的样子

css代码：

path {
    /*定义画出的线条无填充，*/
    fill: none;
    /* 线颜色*/
    stroke: brown;
    /*线条粗细*/
    stroke-width: 2;
}

设置平滑之后的样子

代码：

.interpolate("cardinal") //让线条变得光滑，不是折线而是光滑的曲线

由此，d3画线就已经完成了，接下来就要画坐标系，请参考下篇文章，~~~