「簡單的」 D3.js區域圖
讓我們來:
X | ÿ |
---|---|
0 | 10 |
1個 | 15 |
2 | 35 |
3 | 20 |
和做:
D3.js彎彎曲曲,我發現D3.js Wiki上的示例解釋得太少,正在進行的事情也太多了。在此示例中,我將向您展示如何製作我能設計的最簡單的面積圖。如果您想直接跳到「答案」,請參閱完整的JavaScript。
D3.js不是一個K線走勢圖庫。這是一個K線走勢圖零件庫。該庫感覺就像是SVG和數據操作的混搭,上面撒了一些糖。儘管具有極大的靈活性,但是靈活性是以複雜性為代價的。讓我們潛入。
要構建K線走勢圖,我們需要:數據,SVG容器,邊距,X軸,Y軸,區域形狀本身以及一些CSS,以使其看起來更漂亮。
數據
我們不會把TSV或CSV載入程序或任何回調的東西弄亂。這是簡單明了的數據。
var data = (
{ x: 0, y: 10, },
{ x: 1, y: 15, },
{ x: 2, y: 35, },
{ x: 3, y: 20, },
);
SVG
D3使用SVG(可縮放矢量圖形)繪製形狀。可以創建一個新的 標記,但我在HTML源代碼中添加了以下內容。
保證金
D3中的K線走勢圖沒有邊距,但是主要的D3作者經常談論定義常規邊距。這個想法是要留出一些餘地並定義一個SVG組(即 g
標籤)設置為這些邊距邊界。該代碼僅將組標記視為可繪製區域。
var margin = {top: 20, right: 20, bottom: 40, left: 50},
width = 575 - margin.left - margin.right,
height = 350 - margin.top - margin.bottom;
軸數
為了以可縮放的方式繪製數據,D3需要能夠將數據(例如,x = 0,y = 10)映射到像素位置。我們必須獲取X數據並將其設置在軸上,以使最大X值(即3)與K線走勢圖區域的像素寬度匹配。因為D3非常靈活,所以X和Y必須獨立定義。
在數學課上,您可能被教導X代表域,Y代表範圍。不幸的是,D3也使用域/範圍術語來應用於軸。我們必須將X數據(0-3)作為域,並將K線走勢圖水平尺寸(0- width
)作為範圍。 Y軸也必須採用相同的思路(將0-35應用於K線走勢圖垂直尺寸)。
你可以想到 x
和 y
變數作為轉換函數,它們接受域值並將其轉換為像素大小。 xAxis
和 yAxis
指示軸應該去哪裡。
var x = d3.scale.linear()
.domain((0, d3.max(data, function(d) { return d.x; })))
.range((0, width));
var y = d3.scale.linear()
.domain((0, d3.max(data, function(d) { return d.y; })))
.range((height, 0));
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
區域
區域函數將每個數據點(如(2,35))轉換為描述形狀的信息。每個對應一個x位置,一個上y位置, y1
,以及較低的y位置, y0
。奇怪的是 y0
設置為的常數 height
。當您知道SVG相對於圖形的左上角定位時,這很有意義。任何距離「向下」都是正數,因此正數 height
表示圖形的底部。
var area = d3.svg.area()
.x(function(d) { return x(d.x); })
.y0(height)
.y1(function(d) { return y(d.y); });
放在一起
到目前為止,除了定義一些數據和函數外,我們什麼也沒做。現在我們需要使這些功能起作用。
var svg = d3.select("svg#area")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
svg.append("path")
.datum(data)
.attr("class", "area")
.attr("d", area);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis);
的變數定義 svg
抓住 svg
帶有ID的標籤 area
並添加一個組標籤, g
,以定義SVG中的邊距。所有的繪圖都將在其中進行 g
標籤。
下一節將添加 path
。這是數據和區域功能相遇的地方。這是整個示例的重點。 D3使用每個數據點並將其傳遞給 area
功能。的 area
函數將數據轉換為SVG中路徑上的位置。它將導致:
class="area" d="M0,214.28571428571428L168.33333333333331,
171.42857142857142L336.66666666666663,0L505,128.57142857142858L505,
300L336.66666666666663,300L168.33333333333331,300L0,300Z"/>
最後兩部分將軸添加到SVG。關於它們,沒有太多要說的。
變得漂亮
在「將所有內容放在一起」中,我忽略了 .attr("class", "area")
解釋。 D3可以添加帶有 attr()
。我加了一些 class
屬性,以便可以設置圖形樣式。 SVG使用的屬性與標準HTML標籤不同,但是下面的樣式使該圖具有簡單的外觀。
svg { border: 1px solid #dedede; }
.axis path, .axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.area { fill: #4ca3bd; }
這篇文章首先出現在mattlayman.com上。