D3.js学习（三）

上一节中，咱们已经画出了图表，而且给图表添加了坐标轴的标签和标题，在这一节中，咱们将要学习几个绘制线条不一样特性的几个函数，以及给图表添加格栅。ok,进入话题！
如何给线条设置绘制的样式？

这个其实很是简单，在咱们以前定义的valueline基础上加一个.interpolate(“样式”)就行啦

//定义线条

var valueline = d3.svg.line()

    .interpolate("basis")

    .x(function(d){return x(d.date);})

    .y(function(d){return y(d.close);});

line().interpolate可取的值有不少，须要深刻了解的同窗能够查看他的详细说明

不一样取值的有不一样效果

给图表增长格栅

咱们知道，增长一系列的格栅能够在视觉效果上有一个很大的提高，那么，咱们怎样给图表增长格栅呢？跟前面绘制x轴、y轴同样，咱们须要为咱们将要绘制的格栅建立三个部分的代码：

        1.在css部分给他设置样式
        2.定义一个初始化（绘制）函数
        3.绘制他

 
CSS部分

.grid .tick {
    stroke: lightgrey;
    opacity: 0.7;
}
.grid path {
    stroke-width: 0;
}

定义格栅的初始化（绘制）函数

//定义格栅绘制函数

function make_x_axis(){

    return d3.svg.axis()

        .scale(x)

        .orient("bottom")

        .ticks(5);

}

function make_y_axis(){

    return d3.svg.axis()

        .scale(y)

        .orient("left")

        .ticks(5);

}

绘制格栅

//绘制格栅-x方向

svg.append("g")

    .attr("class", "grid")

    .attr("transform", "translate(0," + height + ")")

    .call(make_x_axis()

        .tickSize(-height, 0, 0)

        .tickFormat("")

    )

//绘制格栅-y方向

svg.append("g")

    .attr("class", "grid")

    .call(make_y_axis()

        .tickSize(-width, 0, 0)

        .tickFormat("")

    )

上面的代码中须要说明的是.tickSize()方法，咱们在这里设置了他们的长度和起始位置，最后一个.tickFormat(“”)是为了让全部的tick都没有标注。最后的效果以下

下节咱们将给图表进行填充！