如何使用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');

保存後在瀏覽器打開，你就會看到繪製好的折線圖了

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。