D3.js製做日期折線圖

時間 2019-12-11

原文原文鏈接

1、引入文件：html

<script src="//d3js.org/d3.v3.min.js"></script>

2、建立容器：git

1 var margin = {top: 20, right: 20, bottom: 30, left: 50},
2             width = 590 - margin.left - margin.right,
3             height = 300 - margin.top - margin.bottom;
4 
5 var svg = d3.select("body").append("svg")
6             .attr("width", width + margin.left + margin.right)
7             .attr("height", height + margin.top + margin.bottom)
8             .append("g")
9             .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

　　須要注意的幾個尺寸：svg畫布的尺寸、chart圖片的尺寸、margin值，另外svg的座標原點是左上角，向右爲正，向下爲正。這對以後的各類元素的transition很重要。github

　　能夠參考一下這篇文章：Margin Convention數組

3、定義X軸與Y軸：app

 1 var parseDate = d3.time.format("%Y-%m-%d").parse;
 2     var x = d3.time.scale()
 3             .range([0, width]);
 4 
 5     var y = d3.scale.linear()
 6             .range([height, 0]);
 7 
 8     var xAxis = d3.svg.axis()
 9             .scale(x)
10             .orient("bottom")
11             .tickFormat(d3.time.format("%m.%d"));
12 
13     var yAxis = d3.svg.axis()
14             .scale(y)
15             .orient("left");
16

　　一、parseDate是個函數，相似於公式。 d3.time.format("%Y-%m-%d").parse 的做用是將"%Y-%m-%d"格式的字符串轉成真正的日期對象（Date）。dom

　　二、規定xy軸的比例尺：d3.time.scale() 表示時間比例尺，d3.scale.linear()表示線性比例尺，domain(輸入)和range(輸出)分別定義比例尺的定義域和值域。svg

　　三、定義座標軸：d3.svg.axis()生成座標軸，.scale()表示座標軸應用的比例尺，orient表示方位，tickFormat(d3.time.format("%m.%d"))表示刻度格式化，也就是輸出日期格式爲12.14的刻度；axis().ticks()能夠用來設置刻度的數量。wordpress

4、讀取文件：函數

d3.tsv("data.tsv", function(error, data) {
        if (error) throw error;

        data.forEach(function(d) {
            d.date = parseDate(d.date);
            d.close = +d.close;
        });

        //在這裏對讀取的數據進行繪圖處理
});

　　一、d3.tsv()用來讀取文件。forEach()來遍歷數據的每項內容。學習

　　二、用以前定義好的日期函數parseDate對數據進行格式化，把日期轉成真正的日期對象。

　　三、+用來將字符串的數值轉化成真正的Number數值。

　　接下來的內容都須要在此讀取函數內部進行處理。

5、定義X軸和Y軸的輸入域：

1         x.domain(d3.extent(data, function(d) { return d.date; }));
2         y.domain(d3.extent(data, function(d) { return d.close; }));

　　一、一般狀況下.domain()和.range()都是鏈式操做一塊兒寫的，固然也能夠像咱們同樣先設置.range()再來設置.domain()；

　　二、d3.extent() 返回給定數組天然排序的最小值和最大值。data指定要處理的數據，d表示data的每一項，而後extent返回data每一項date的最大值和最小值。

6、繪製座標軸：

var line = d3.svg.line()
                .x(function(d) { return x(d.date); })
                .y(function(d) { return y(d.close); });
        svg.append("g")
                .attr("class", "x axis")
                .attr("transform", "translate(0," + height + ")")
                .call(xAxis);
        svg.append("g")
                .attr("class", "y axis")
                .call(yAxis)
                .append("text")
                .attr("transform", "rotate(0)")
                .attr("y", 25)
                .attr("x", 75)
                .attr("dy", ".71em")
                .style("text-anchor", "end")
                .text("個人數據");

　　一、定義線條：d3.svg.line()的功能也相似於一個公式，傳入對象後返回對象的x座標和y座標。

　　二、.call(xAxis)把選擇的數據應用到定義的座標軸。

7、繪製網格線：

        //定義縱軸網格線
        var yInner = d3.svg.axis()
                .scale(y)
                .tickSize(-width,0,0)
                .tickFormat("")
                .orient("left")
                .ticks(5);
        //添加縱軸網格線
        var yInnerBar=svg.append("g")
                .attr("class", "inner_line")
                .attr("transform", "translate(0,-25)")
                .call(yInner);

　　.tickSize()設定了刻度線的長度和位置。

8、繪製折線路徑：

svg.append("path")
                .datum(data)
                .attr("class", "line")
                .attr("d", line)
                .attr("opacity", 0)
                .transition()
                .duration(2000)
                .attr("opacity", 1);

9、添加數據散點：

// 散點
        var points = svg.selectAll(".MyCircle")
                .data(data)
                .enter()
                .append("circle")
                .attr("class","MyCircle")
                .attr("transform","translate(0,0)")
                .attr("r", 3)
                .attr("opacity", 0)
                .transition()
                .duration(2000)
                .attr("cx", function(d){ return x(d.date); })
                .attr("opacity", 1)
                .attr("cy", function(d){ return y(d.close); });

附1：測試數據 data.tsv　　

date    close
2015-11-21    620.13
2015-11-22    605.23
2015-11-23    622.77
2015-11-24    626.2
2015-11-25    628.44
2015-11-26    636.23
2015-11-27    633.68
2015-11-28    624.31
2015-11-29    629.32
2015-11-30    618.63
2015-12-1    599.55
2015-12-2    609.86
2015-12-3    617.62
2015-12-4    614.48
2015-12-5    606.98
2015-12-6    596.05
2015-12-7    599.34
2015-12-8    602.5
2015-12-9    605.96
2015-12-10    601.1
2015-12-11    585.57

附二、圖表樣式：　　

.axis path,
        .axis line {
            fill: none;
            stroke: #F2E8DE;
            shape-rendering: crispEdges;
        }
        .line {
            fill: none;
            stroke: #FCAD62;
            stroke-width: 1.5px;
        }
        text{
            fill:#999;
        }
        .inner_line line {
            fill: none;
            stroke:#E7E7E7;
            shape-rendering: crispEdges;
        }
        .MyCircle {
            fill: #FCAD62;
        }