css3绘制折线

CSS3绘制折线是一种非常常用的技术，包括在数据可视化、图表、地图等方面都有很大的作用。CSS3的新特性让绘制折线更加简单、美观，下面就来详细介绍一下。

折线的基本样式
.line{
  stroke: #eb5e28; /*折线颜色*/
  stroke-width: 2px; /*折线宽度*/
  fill: none; /*不要填充*/
}

首先，我们需要为折线定义一些基本的样式。这些样式将决定折线的颜色、线宽、填充等属性。

定义路径

接下来我们需要在SVG中定义绘制折线的路径。这里的路径是通过d属性来确定的。d属性的值为一系列的绘制命令，这些命令包括了直线，曲线等。由这些命令组成的路径将决定折线的形状和大小。上面代码中，我们定义了一个SVG的画布，宽300，高200，并在其内部加入了一个路径，id为line，样式为line，但是路径的d属性值为空。

添加数据
var data = [5,10,15,20,25,30];
var line = d3.line().x(function(d,i){return i*50;}).y(function(d){return 150-d*3;});
d3.select("#line").attr("d",line(data));

通过以上的代码，我们已经可以在SVG上定义一个折线，然而这还不够，我们需要添加数据来决定这条折线的形态。这里，我们使用了d3.js库的line()方法来设置x,y坐标，该方法需要指定数据来源的数组data。在这个例子中，我们将数据分别乘以50和3来确定x和y坐标。最后，我们使用d3.select()方法选中定义好的路径#line，并通过.attr()方法来更新其d属性值，使其和绘制命令对应，展现数据的折线。

总之，CSS3绘制折线是一种非常实用、美观的技术。通过上述的一些代码和方法，我们可以方便的绘制出我们所需要的折线图，并添加数据以展示更加形态的数据可视化效果。