d3.js ----面積圖表

Null 發(fā)布于2019-08-21 17:56 / 3280人閱讀

摘要：設(shè)置坐標(biāo)軸樣式，將線性圖標(biāo)的下段代碼中的改為坐標(biāo)點(diǎn)的值為數(shù)組的下標(biāo)，參數(shù)表示傳進(jìn)來的數(shù)據(jù)，表示下標(biāo)表示軸表示實(shí)際曲線上的值讓線條變得光滑，不是折線而是光滑的曲線當(dāng)頁面有多個相同元素，只能選擇符合條件的第一個元素，想要選擇其中某一個指定的元素

d3設(shè)置坐標(biāo)軸樣式，將線性圖標(biāo)的下段代碼中的line改為area

  var area_generator = d3.svg.area()
        .x(function(d, i) {
            return scale_x(i);
        }) //x坐標(biāo)點(diǎn)的值為data數(shù)組的下標(biāo)，參數(shù)d表示傳進(jìn)來的數(shù)據(jù)，i表示下標(biāo)
        .y0(g_height) //y0表示y軸
        .y1(function(d) {
            return scale_y(d)
        }) //y1表示實(shí)際曲線上的值
        .interpolate("cardinal") //讓線條變得光滑，不是折線而是光滑的曲線

    // 當(dāng)頁面有多個相同元素，select只能選擇符合條件的第一個元素，想要選擇其中某一個指定的元素，可以把那個元素賦給一個變量，然后使用變量名去實(shí)現(xiàn)
    // 如下所示，g表示上面賦值的那個變量g,而不是標(biāo)簽
    g.append("path").attr("d", area_generator(data))

可以看到這個時候的圖表樣子如下所示：

設(shè)置填充樣式

g.append("path").attr("d", area_generator(data)) //通過d屬性值，添加line_generator函數(shù)
        .style("fill", "steelblue") //設(shè)置填充樣式

到這兒面積圖表基本就畫好了。?

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/90229.html

相關(guān)文章

d3.js 使用坐標(biāo)軸

摘要：本片記錄坐標(biāo)軸入門，使用版本如何實(shí)現(xiàn)坐標(biāo)軸生成的坐標(biāo)圖是通過的路徑元素元素組成的，如下圖表示的是底部坐標(biāo)軸不包括內(nèi)部刻度，如下這部分通過描繪，在中稱為容器則包括了和作為即線，即文字實(shí)現(xiàn)坐標(biāo)軸主要步驟步驟主要如下創(chuàng)建比例尺創(chuàng)建坐標(biāo)軸，是個函數(shù) 本片blog記錄d3坐標(biāo)軸入門，使用版本v5.9.2 SVG如何實(shí)現(xiàn)坐標(biāo)軸 d3生成的坐標(biāo)圖是通過svg的path(路徑)元素 + g + lin...

Karuru 2019-08-23 16:43 評論0 收藏0
d3.js入門——selection與創(chuàng)建條形圖

摘要：入門，根據(jù)官網(wǎng)部分教程學(xué)習(xí)，發(fā)現(xiàn)因為版本更新，有些和概念可能不適用，但總體思想未變。入門d3.js，根據(jù)官網(wǎng)部分教程學(xué)習(xí)，發(fā)現(xiàn)因為版本更新，有些api和概念可能不適用，但總體思想未變。本文思路跟隨此篇blogLet’s Make a Bar Chart學(xué)習(xí)，加上自己的理解，并且查閱了部分更新資料元素選擇 d3通過d3.select()或者d3.selectAll()獲取元素，這兩個...

yanbingyun1990 2019-08-23 16:18 評論0 收藏0
d3.js 創(chuàng)建完整柱形圖

摘要：之前只是各個部分的，現(xiàn)在將各部分整合起來，發(fā)現(xiàn)還是學(xué)到了不少東西主要是加深了對比例尺的理解代碼樣式及數(shù)據(jù)樣式接著是數(shù)據(jù)及柱狀圖寬高等留白用創(chuàng)建比例尺實(shí)踐之后對比例尺與坐標(biāo)軸的理解加深了一點(diǎn)軸使用線性比例尺，注意輸入域軸使用比例尺用于柱形 d3js.org v5.9.2 之前只是各個部分的demo，現(xiàn)在將各部分整合起來，發(fā)現(xiàn)還是學(xué)到了不少東西主要是加深了對scale（比例尺）的理解...

snowLu 2019-08-23 16:44 評論0 收藏0
交互式數(shù)據(jù)可視化－D3.js（二）選擇集和數(shù)據(jù)

摘要：相關(guān)的函數(shù)有兩個和的工作過程的方法很簡單，使用的也比較少。的工作過程能將數(shù)據(jù)各項分別綁定到選擇的元素集上。當(dāng)數(shù)組長度與元素數(shù)量不一致時，同樣能夠處理。多出的元素在最后。選擇集 select和selectAll類似jquery： d3.select(body) d3.select(.body) d3.select(#body) d3.selectAll(...

leanote 2019-08-02 11:54 評論0 收藏0
交互式數(shù)據(jù)可視化－D3.js（二）選擇集和數(shù)據(jù)

摘要：相關(guān)的函數(shù)有兩個和的工作過程的方法很簡單，使用的也比較少。的工作過程能將數(shù)據(jù)各項分別綁定到選擇的元素集上。當(dāng)數(shù)組長度與元素數(shù)量不一致時，同樣能夠處理。多出的元素在最后。選擇集 select和selectAll類似jquery： d3.select(body) d3.select(.body) d3.select(#body) d3.selectAll(...

褰辯話 2019-08-23 12:42 評論0 收藏0