欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

使用D3.js制作圖表詳解

 更新時(shí)間:2017年08月13日 09:23:59   作者:Evelynzzz  
D3是目前最流行的JavaScript可視化圖表庫(kù)之一,D3的圖表類型非常豐富,并且支持SVG格式,因此應(yīng)用十分廣泛,也有很多圖表插件基于D3開發(fā),比如MetricsGraphics.js,在D3上構(gòu)建的數(shù)據(jù)圖表非常強(qiáng)大。

D3是用于數(shù)據(jù)可視化的Javascript庫(kù)。使用SVG,Canvas和HTML。結(jié)合強(qiáng)大的可視化技術(shù)和數(shù)據(jù)驅(qū)動(dòng)的DOM操作方法。

D3與JQuery的區(qū)別 D3是數(shù)據(jù)驅(qū)動(dòng)的,JQuery不是:我們使用JQuery直接操縱元素;但是使用D3
時(shí)我們需要通過(guò)D3專有的data(),enter()和exit()方法提供數(shù)據(jù)和回調(diào),然后D3操作元素。 D3通常用于數(shù)據(jù)可視化;JQuery用于創(chuàng)建Web應(yīng)用。D3有很多數(shù)據(jù)可視化擴(kuò)展;JQuery有很多Web應(yīng)用插件。兩者都是Javascript DOM操作庫(kù),提供CSS選擇器和流暢的API。

What is the difference between D3 and JQuery?

最常用的方法

d3.select(selector):選擇第一個(gè)匹配selector的元素。如果沒(méi)有匹配的元素,返回一個(gè)空的選擇(但不是null或undefined)。

d3.selectAll(selector):與select()不同的是,會(huì)選擇所有匹配的元素。

selection.append(type):如果指定的type是一個(gè)字符串,則將這個(gè)type(標(biāo)簽名稱)作為新元素附加到每個(gè)選定元素的最后一個(gè)子元素。

selection.attr(name, [value]):value確定時(shí),將selection中名為name的屬性值設(shè)置成value。value可以為常量或者方法。如果value沒(méi)有給出,返回selection中第一個(gè)非空元素的name屬性當(dāng)前值。

selection.data([data[,key]]):將數(shù)據(jù)和元素綁定起來(lái),并返回一個(gè)新的selection。

selection.enter():返回enter selection。此時(shí)DOM元素少于對(duì)應(yīng)的數(shù)據(jù)。用于添加缺少的DOM元素。比如:

var div = d3.select("body")
  .selectAll("div")
  .data([4, 8, 15, 16, 23, 42])
  .enter().append("div")
  .text(function(d) { return d; });

如果body是空的,上面的代碼就會(huì)根據(jù)數(shù)據(jù)創(chuàng)建新的div元素,然后添加到body元素中,并將文本內(nèi)容設(shè)置為對(duì)應(yīng)的數(shù)字。頁(yè)面結(jié)果如下:

 <div>4</div>
 <div>8</div>
 <div>15</div>
 <div>16</div>
 <div>23</div>
 <div>42</div>

selection.exit():返回exit selection。此時(shí)DOM元素多于對(duì)應(yīng)的數(shù)據(jù)。用于移除多余的DOM元素。比如,基于上面的例子,我們要更新數(shù)據(jù):

div = div.data([1, 2, 4, 8, 16, 32], function(d) { return d; });

因?yàn)榇藭r(shí)指定了key方法(用于指定數(shù)據(jù)和元素匹配的順序等),并且數(shù)據(jù)[4,8,16]匹配已經(jīng)存在的元素,所以u(píng)pdate selection只包含3個(gè)div元素。我們可以使用enter selection添加3個(gè)新元素:

div.enter().append("div").text(function(d) { return d; });

然后,還需要移除不需要的元素[15, 23, 42]:

div.exit().remove();

頁(yè)面結(jié)果:

 <div>1</div>
 <div>2</div>
 <div>4</div>
 <div>8</div>
 <div>16</div>
 <div>32</div>

制作柱狀圖


柱狀圖示例

使用D3的時(shí)候,要對(duì)SVG的結(jié)構(gòu)有一個(gè)了解。要繪出什么圖形,需要用到什么標(biāo)簽,標(biāo)簽需要定義什么屬性。
比如,制作一個(gè)柱狀圖,主要是XY坐標(biāo)軸和柱形。XY軸用到line標(biāo)簽繪制直線,以及text標(biāo)簽顯示刻度的文字。柱形用到rect標(biāo)簽繪制長(zhǎng)方形,那如果要帶圓角的長(zhǎng)方形,我們可以設(shè)置rect標(biāo)簽的rx或ry屬性,如果要定義長(zhǎng)方形的位置,需要設(shè)置x和y屬性等。就這樣,一部分一部分的組合到一起成為一張圖。

以下的內(nèi)容是基于D3 3.x 的API,有些接口跟D3 4.0是不同的。
D3 3.x API Reference
D3 4.0 API Reference

根部的svg

D3繪圖首先要?jiǎng)?chuàng)建一個(gè)svg元素并定義寬高等屬性:

var svg = d3.select(id).append("svg")
  .attr('class', 'svg_timeline')
  .attr("width", width + margin.left + margin.right)
  .attr("height", height + margin.top + margin.bottom);

坐標(biāo)軸
制作坐標(biāo)軸首先需要用到D3的比例尺。用到方法 axis.scale([scale]) ,設(shè)置坐標(biāo)軸的比例尺,或者返回當(dāng)前的比例尺。比例尺分為:

定量比例尺:連續(xù)的數(shù)據(jù),比如數(shù)字。時(shí)間比例尺:數(shù)據(jù)是時(shí)間。序數(shù)比例尺:離散的數(shù)據(jù),比如名稱,類別等。

比如我們要制作一個(gè)有時(shí)間刻度的X軸和一個(gè)數(shù)字刻度的Y軸,就可以使用時(shí)間比例尺和定量比例尺,或者更具體的說(shuō),線性比例尺。

d3.scale.linear():創(chuàng)建一個(gè)線性比例尺。 d3.time.scale():創(chuàng)建一個(gè)時(shí)間比例尺??潭群涂潭雀袷脚渲脼楸镜貢r(shí)間。

確定比例尺之后還需要設(shè)置輸入域和輸出范圍。比如一個(gè)x軸的比例尺為:

var x = d3.time.scale()
  .range([0, 坐標(biāo)軸的寬度])
  .domain(最小日期, 最大日期);

最小日期和最大日期都是Date對(duì)象。然后設(shè)置X坐標(biāo)軸的比例尺并創(chuàng)建它:

//生成x坐標(biāo)軸
var xAxis = d3.svg.axis()    //新建一個(gè)默認(rèn)的坐標(biāo)軸
  .scale(x)    //設(shè)置比例尺
  .ticks(d3.time.day, 1)   //指定刻度生成的方式
  .tickFormat(function(d){  //自定義刻度文字格式
    var month = d.getMonth() + 1;
    return month+'月'+ d.getDate() +'日';
  })
  .tickPadding([15]) //坐標(biāo)軸線與文字之間的距離
  .tickSize(-height)
  .orient("bottom"); //位置

ticks的參數(shù)類型取決于對(duì)應(yīng)的比例尺的類型,這里傳的參數(shù)是時(shí)間間隔,也就是說(shuō)刻度與刻度之間是相隔一天的。
tickFormat則讓我們可以自定義刻度的文字格式。

值得一說(shuō)的是,如果數(shù)據(jù)中對(duì)應(yīng)X軸的數(shù)據(jù)是字符串,比如‘2017-08-12'。那綁定到頁(yè)面上的數(shù)據(jù)是需要被處理的。D3提供解析日期的接口以及日期格式化的接口。

format.parse(string):把一個(gè)字符串string解析為一個(gè)日期。 d3.time.format(specifier):根據(jù)給定的specifier創(chuàng)建一個(gè)當(dāng)?shù)貢r(shí)間格式化。

比如:

var parseDate = d3.time.format("%Y-%m-%d").parse; //時(shí)間解析器
var date = parseDate('2017-08-12'); //將字符串解析成日期

最后,在svg元素中添加坐標(biāo)軸:

//添加X(jué)軸元素
svg.append("g")
  .attr("class", "axis x")
  .attr("transform", "translate(0," + height + ")")
  .call(xAxis);

selection.call(function[, arguments…])方法調(diào)用指定的方法一次,并把selection跟隨參數(shù)一起傳遞到方法中。

柱狀圖中的長(zhǎng)方形
具體步驟:將數(shù)據(jù)跟頁(yè)面元素綁定,并創(chuàng)建所需要的頁(yè)面元素,具體設(shè)置每個(gè)頁(yè)面元素的樣式位置,以及事件監(jiān)聽等。

//添加條形的元素
var bars = svg.selectAll(".barRect")
  .data(ddata)  //綁定數(shù)據(jù)
  .enter().append("g")  //創(chuàng)建缺少的頁(yè)面元素
  .attr('class', 'barRect')
  .attr("id", function(d, i) {
    return "barRect-" + i;
  });          

//定義矩形的位置
//x為矩形最左端的位置
//y為矩形最頂端的位置
bars.append("rect")
  .attr('class','bar-rect')
  .attr("width",16)  //長(zhǎng)方形的寬度
  .attr("y", function(d) {
    return y(d.value);   //使用比例尺確定坐標(biāo)Y值
  })
  .attr("x", function(d) {
    return x(d.date) - 8;  //使用比例尺確定坐標(biāo)X值
  })
  .attr("height", function(d) {  //條形的高度
    return height - y(d.value);
  })
  .attr('rx',10) //圓角
  .attr('ry',10) //圓角
  .attr('fill','url(#linear-gradient)'); //填充漸變色

相關(guān)文章

最新評(píng)論