d3.js入門

本來一直是使用echarts來畫圖的,結果畫好了以后,公司又要使用d3來畫,沒有對它進行特別的深入,只是了解了一下,能完成需求.
還有就是雖然有d3的官網可以學習,但是我不翻墻的話網站基本上是沒辦法進去的 ,為了以后可以方便的使用d3的一些東西,我覺得自己有必要把它寫下來.
先看效果圖


image.png

是不是感覺和echarts畫出來的一毛一樣,我也這么覺得......下次再研究兩者有啥區別吧.

代碼直接貼過來

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #container{
            background-color: #ddd;
            width: 500px;
            height: 350px;
        }
        path{
            fill: none;
            stroke: #4682B4;
            stroke-width: 2 ;
        }
        .domain,.tick line{
            stroke: gray;
            stroke-width: 1;
        }
    </style>
</head>
<body>
<div id="container"></div>
<script src="d3.js"></script>
<script>
    var width = 500,
        height = 300,
        margin = {left:50,top:30,right:20,bottom:20},
        g_width = width-margin.left-margin.right,
        g_height = height-margin.top-margin.bottom;
    var svg = d3.select("#container")
        .append("svg")
        .attr("width",width)
        .attr("height",height)
    var g = d3.select("svg")
        .append("g")
       .attr("transform","translate("+margin.left+","+margin.top+")")
    var dataset = [
        {x: 0, y: 11}, {x: 1, y: 35},
        {x: 2, y: 23}, {x: 3, y: 78},
        {x: 4, y: 55}, {x: 5, y: 18},
        {x: 6, y: 98}, {x: 7, y: 100},
        {x: 8, y: 22}, {x: 9, y: 65}
    ];

    var scale_x = d3.scale.linear()
        .domain(d3.extent(dataset, function(d) {
            return d.x;
        }))
        .range([0,g_width])
    var scale_y = d3.scale.linear()
        .domain([0, d3.max(dataset,function(d) {
            return d.y;
        })])
        .range([g_height,0])
    var x_axis = d3.svg.axis().scale(scale_x),
        y_axis = d3.svg.axis().scale(scale_y).orient("left");
    g.append("g")
        .call(x_axis)
        .attr("transform","translate(0,"+g_height+")")
    g.append("g")
        .call(y_axis)
        .append("text")
        .text("Price($)")
        .attr("transform","rotate(-90)")
        .attr("text-anchor","end")
        .attr("dy","1em")

     //繪制曲線
        var line_generator = d3.svg.line()
            .x(function(d){
                return scale_x(d.x);
            })
            .y(function(d){
                return scale_y(d.y);
            })
       
            .interpolate("cardinal");
        d3.select("g")
            .append("path")
            .attr("d",line_generator(dataset))
</script>
</body>

上面的代碼同樣html css js三部分

HTML部分


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
     css代碼
</head>
<body>
<div id="container"></div>

<script src="d3.js"></script>
<script>
      js代碼
</script>
</body>

css部分

    <style>
        #container{
            background-color: #ddd;
            width: 500px;
            height: 350px;
        }
        path{
            fill: none;//可以對曲線進行填充色
            stroke: #4682B4;/*曲線的顏色*/
            stroke-width: 2 ;/*曲線的寬度*/
        }
        .domain,.tick line{/*刻度尺的樣式*/
            stroke: gray;
            stroke-width: 1;
        }
    </style>

path 是對曲線進行的一系列樣式設置

JS部分

  • 0 模擬數據
   var dataset = [
        {x: 0, y: 11}, {x: 1, y: 35},
        {x: 2, y: 23}, {x: 3, y: 78},
        {x: 4, y: 55}, {x: 5, y: 18},
        {x: 6, y: 98}, {x: 7, y: 100},
        {x: 8, y: 22}, {x: 9, y: 65}
    ];
  • 1 設置圖表大小:首先要設置畫布的大小,然后用margin來存儲圖表的邊距信息,計算出圖表的寬度和高度
 var width = 500,
        height = 300,
        // SVG畫布邊緣與圖表內容的距離
        margin = {left:50,top:30,right:20,bottom:20},
        g_width = width-margin.left-margin.right,
        g_height = height-margin.top-margin.bottom;
  • 2 添加畫布
 //svg  // 創建一個分組用來組合要畫的圖表元素
    var svg = d3.select("#container")
        .append("svg")
        //屬性：寬、高
        .attr("width",width)
        .attr("height",height)
    //g元素
    var g = d3.select("svg")
        .append("g")
        // // 設置該分組的transform屬性
        .attr("transform","translate("+margin.left+","+margin.top+")")

d3.select("#container")選擇container元素.往這個里面添加一個子元素"svg".,給這個svg設定一些屬性，再往“svg”中添加一個”g”元素并設定一些屬性。

  • 3 設置橫軸方向和縱軸方向的區域（Domains）和范圍（Ranges）
    畫布添加好了 可是我要怎么畫呢 ?首先要確定定義域和值域
 //設置比例縮放
    //創建x軸的比例尺(線性比例尺)
    var scale_x = d3.scale.linear()//創建了線性比例尺
        .domain(d3.extent(dataset, function(d) {//定義定義域
            return d.x;
        }))
        .range([0,g_width])//定義值域
    // 創建y軸的比例尺(線性比例尺)
    var scale_y = d3.scale.linear()
        .domain([0, d3.max(dataset,function(d) {//定義定義域
            return d.y;
        })])
        .range([g_height,0])//定義值域

這段代碼是為了讓我們導入的數據與圖表的大小相適應，range知道是圖表范圍的大小，他是一個尺寸大小。這段代碼告訴D3我們要畫些東西在x軸上，這些東西是時間/日期的一個實體。

而domain指的是數據的區域，extent返回的是最小的x或y到最大的x或y這樣一個跨度，所以，最小的x或y就對應于上面range的最小值0

對于y軸的值域,g_height 表示的是當數據為最大值即“8”的時候，輸出最高點為g_height。這里要注意由于瀏覽器從左到右、從上到下的坐標系數值是逐漸增到，因此我們將range的值設成[g_height，0]即可實現整一個的翻轉
//，因為SVG畫布的y軸與傳統認知上的y軸的方向是反著來的，所以在定義y軸的定義域和值域對應關系時，也需要反著來

  • 4 設置x,y坐標軸
    設置好坐標比例問題,就要開始創建坐標軸,添加坐標軸函數:axis()
  //創建x軸 添加坐標軸函數：axis（）
    var x_axis = d3.svg.axis().scale(scale_x),
        // 創建y軸
        y_axis = d3.svg.axis().scale(scale_y).orient("left").ticks(5);;

坐標軸axis初始化方法通過d3.svg.axis()來調用，然后調用.scale(scale_x)用前面定義的scale_x來給坐標軸設定刻度， .orient()設定刻度相對坐標軸的位置，.ticks()告訴D3在坐標軸上設定差不多幾個刻度就夠了，比方說你要D3給你的Y軸設定大概20個刻度 y_axis = d3.svg.axis().scale(scale_y).orient("left").ticks(20);

image.png
  • 5 添加x,y坐標軸
    既然比例設置好了,坐標軸也設置好了,畫布也添加完成了,那么就先把坐標軸畫出來
    //依次添加X、Y坐標軸,并通過偏移量的設置使得X坐標軸往下移
    // 添加SVG元素并與x軸進行“綁定”
    g.append("g")
        .call(x_axis)
        .attr("transform","translate(0,"+g_height+")")
    // 添加SVG元素并與y軸進行“綁定”
    g.append("g")
        .call(y_axis)
        .append("text")
        .text("Price($)")
        .attr("transform","rotate(-90)")
        .attr("text-anchor","end")
        .attr("dy","1em")
  • 6 繪制曲線
    什么都準備好了,就可以繪制曲線了
//繪制曲線
        var line_generator = d3.svg.line()
            .x(function(d){
                return scale_x(d.x);
            })
            .y(function(d){
                return scale_y(d.y);
            })
            // 選擇線條的類型
            .interpolate("cardinal");
    // 添加path元素，并通過line_generator()計算出值來賦值
        d3.select("g")
            .append("path")
            .attr("d",line_generator(dataset))

這樣,一個曲線圖就完成啦 !!

如果想在曲線上添加點的話,就加入下面的代碼

d3.select("g").selectAll('circle')
        .data(dataset)
        .enter()
        .append('circle')
        .attr('cx', function(d) {
            return scale_x(d.x);
        })
        .attr('cy', function(d) {
            return scale_y(d.y);
        })
        .attr('r', 3)
        .attr('fill', function(d) {
            return "white";
        });

這樣畫出來的曲線圖就有點啦


image.png

有曲線圖當然也有面積圖 ,如果你想繪制面積圖表,注意需要三個參數,y0將原來的線型圖變成了封閉的面積圖咯 將上述步驟6中繪制曲線的代碼直接換成一下代碼就可以實現了

 var myArea = d3.svg.area()
            .x(function (d) {
                return scale_x(d.x)
            })
            .y0(g_height)
            .y1(function(d){
                return scale_y(d.y)
            })
            .interpolate("cardinal")

        d3.select("g")
            .append("path")
            .attr("d",myArea(dataset))
            .style("fill","pink")
image.png

完成了這些基本上就可以應付一些簡單的d3畫圖啦

官網:http://www.w3.org
不過我老是訪問不了 汗(⊙﹏⊙)b!!!

最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • D3.js 入門教程（連載） 近年來，可視化越來越流行，許多報刊雜志、門戶網站、新聞媒體都大量使用可視化技術，使得...
    極客學院Wiki閱讀 12,414評論 2贊 25
  • 本教程是一個簡單的入門教程，能夠幫助初學者快速掌握D3的基礎知識。 本節內容介紹了添加元素、綁定數據、使用數據、矢...
    笨笨的笨小孩閱讀 2,062評論 0贊 1
  • D3是用于數據可視化的Javascript庫。使用SVG，Canvas和HTML。結合強大的可視化技術和數據驅動的...
    Evelynzzz閱讀 7,912評論 7贊 5
  • 2017-6-18學經匯報： 一、學經日期：2017年6月18日 農歷五月廿五 陰 星期日 寶...
    b0a4ca4b06a4閱讀 529評論 0贊 0
  • 窮人是被匱乏的生活遮蔽了視野才一直處于貧困中？歷史學家布雷格曼說，不對，窮人之所以窮就是因為缺錢。這個答案有...
    會飛的貓666閱讀 412評論 0贊 0