d3.js ----面積圖表

Null 發布于2019-08-21 17:56 / 3275人閱讀

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

d3設置坐標軸樣式，將線性圖標的下段代碼中的line改為area

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

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

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

設置填充樣式

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

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/90229.html

d3.js 使用坐標軸

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

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

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

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

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

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

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

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

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

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