如何使用D3绘制折线图

时间 2019-11-12

标签如何使用 d3 绘制折线繁體版

原文原文链接

D3 是一个了不得的JS库，能够制做出交互式的吸引人眼球的图片。D3 是数据驱动并基于svg,html和css 来绘制图像。css

下面咱们使用D3来绘制一个折线图。html

首先bootstrap

在使用D3以前，咱们先下载D3文件，或者你能够经过下面代码连接到最新版本的文件。浏览器

<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>

接下来咱们首先绘制折线图的X轴和Y轴。app

咱们在这个基本的index.html 上绘制图形。dom

<html lang="en">
 
<head>
 
    <link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">
 
    <link href="http://getbootstrap.com/examples/justified-nav/justified-nav.css" rel="stylesheet">
 
    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
 
</head>
 
<body>
 
    <div class="container">
 
        <div class="jumbotron">
 
        </div>
 
    </div>
 
</body>
 
</html>

这些是咱们将要描述的简单的数据：svg

var data = [{
    "sale": "202",
    "year": "2000"
}, {
    "sale": "215",
    "year": "2001"
}, {
    "sale": "179",
    "year": "2002"
}, {
    "sale": "199",
    "year": "2003"
}, {
    "sale": "134",
    "year": "2003"
}, {
    "sale": "176",
    "year": "2010"
}];

可缩放矢量图形（svg）基于XML 能够绘制2D图形，而且支持交互和动画。咱们使用一个svg元素来绘制咱们的折线图。这个元素在 index.html中。动画

<svg id="visualisation" width="1000" height="500"></svg>

而后咱们来定义长和宽等一些常量，画图时会用到。D3提供了一个方法 d3.select 来选择元素，咱们用这个方法来选择index.html 中的svg 元素。spa

var vis = d3.select("#visualisation"),
    WIDTH = 1000,
    HEIGHT = 500,
    MARGINS = {
        top: 20,
        right: 20,
        bottom: 20,
        left: 50
    },

基于这些数据，咱们要创建X轴和Y轴，咱们须要获取到定义这两个轴的最大和最小值。code

D3 提供了一个叫 d3.scale.linear 的方法，这个方法用来绘制X,Y 轴的刻度，这个方法使用 range 和 domain 属性来建立刻度。

range 定义了能够用来绘图的区域，domain 定义了轴上的最大和最小刻度值。下面绘制X轴：

xScale = d3.scale.linear().range([MARGINS.left, WIDTH - MARGINS.right]).domain([2000,2010]),

range 的值已经在以前被定义出来，使图像不会在边缘过于拥挤。最大和最小值则基于以前的数据。

一样的方式，咱们来绘制Y轴：

yScale = d3.scale.linear().range([HEIGHT - MARGINS.top, MARGINS.bottom]).domain([134,215]),

D3为画轴提供了一个叫作 d3.svg.axis 的API。接下来，咱们用上面定义好的刻度来绘制X,Y轴。

xAxis = d3.svg.axis()
    .scale(xScale),
  
yAxis = d3.svg.axis()
    .scale(yScale);

而后咱们把画好的X轴添加到上面的svg容器中。

vis.append("svg:g")
    .call(xAxis);

保存上面的代码，而后在浏览器中打开 index.html ，你会看到

这就是X轴，但它还有一些问题。首先，咱们须要它在垂直下方的位置上，当咱们把X轴添加到svg 容器中时，咱们使用translate transform 属性把它基于坐标向下移动，

因为咱们只需把X轴向下移动咱们把x轴上的坐标定义为 0，而后y轴的坐标定义为以前的margin。

vis.append("svg:g")
    .attr("transform", "translate(0," + (HEIGHT - MARGINS.bottom) + ")")
    .call(xAxis);

而后咱们用下面的代码把Y轴添加到svg容器中：

vis.append("svg:g")
    .call(yAxis);

保存上面的修改，而后在浏览器中打开index.html 你会看到这两个轴

如你所见，Y轴的位置不正确，咱们须要改变它的方向，并把它放在左边，因为他们已经在左边对齐，咱们使用D3 的 transform 来把它正确的放到X轴的旁边，咱们使用

orient 属性来改变它的方向。

yAxis = d3.svg.axis()
    .scale(yScale)
    .orient("left");

使用D3 的transform 把Y轴添加到svg 容器中。

vis.append("svg:g")
    .attr("transform", "translate(" + (MARGINS.left) + ",0)")
    .call(yAxis);

咱们使垂直方向的值为0，这样就能水平的移动它了，保存后在浏览器打，你会看到

绘制折线

为了把样品数据展现在图中，咱们要画出他们的X，Y轴的坐标而后再画一条线链接他们，D3 提供了一个API 方法d3.svg.line() 来画线。因此，添加下面代码：

var lineGen = d3.svg.line()
  .x(function(d) {
    return xScale(d.year);
  })
  .y(function(d) {
    return yScale(d.sale);
  });

咱们按照以前定义好的X,Y轴的坐标绘制了数据的各个点的坐标。

而后咱们在这个svg 上使用lineGen 方法画一条线将以前的数据坐标链接起来，咱们再为这条线添加一些属性，好比stroke 线的颜色，stroke-width 线的宽度。

vis.append('svg:path')
  .attr('d', lineGen(data))
  .attr('stroke', 'green')
  .attr('stroke-width', 2)
  .attr('fill', 'none');

保存后在浏览器打开，你就会看到绘制好的折线图了