d3.js ---畫坐標軸

zzzmh 發布于2019-08-02 15:59 / 553人閱讀

摘要：畫坐標軸使用的的方法生成坐標軸頁面效果如下這個時候軸在頁面的上方，不在我們想要的位置，可以通過設置屬性將坐標軸移到自己想要的位置畫軸效果如下，這個時候軸在頁面的上方，不在我們想要的位置，所以要讓軸旋轉軸旋轉代碼加上旋轉后的效果圖如下會發現軸

畫坐標軸

//使用d3的svg的axis()方法生成坐標軸
var x_axis = d3.svg.axis().scale(scale_x),
    y_axis = d3.svg.axis().scale(scale_y)

g.append("g")
    .call(x_axis)

頁面效果如下：這個時候x軸在頁面的上方，不在我們想要的位置，可以通過設置transform屬性將坐標軸移到自己想要的位置

畫y軸

g.append("g")
    .call(y_axis)

效果如下，這個時候x軸在頁面的上方，不在我們想要的位置，所以要讓y軸旋轉

y軸旋轉代碼：加上 orient()

y_axis = d3.svg.axis().scale(scale_y).orient("left")

旋轉后的效果圖如下：會發現y軸的數值是由大變小而不是由小變大，這是因為在計算機頁面中的時候和幾何數學中的坐標軸哦的方向是不一樣的

普通數學坐標系：

計算機屏幕坐標系

所以旋轉后的y軸坐標系的值是由大變小而不是由小變大

所以我們可以改變y軸的值的范圍來改變頁面的顯示效果

var scale_y = d3.scale.linear()
    .domain([0, d3.max(data)]) //domain定義輸入范圍
    //將 .range([0, g_height])修改為：
    .range([g_height, 0]) //range（）定義輸出范圍

發現這兩個類控制著坐標軸樣式，通過設置css樣式給坐標軸加上刻度

.domain,
.tick line {
    stroke: gray;
    stroke-width: 1;
}

到這兒，坐標系就畫完了，~

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

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

D3.js數據可視化

摘要：和之前用的有啥不同和都是用來生成各類圖表的，區別的話可以從使用方法和實現方式上是通過來繪制圖形具體使用方法是通過方法初始化一個實例并通過方法生成一個簡單的柱狀圖很輕松搞定。通過來繪制圖形使用時需要先創建畫布元素然后進行各種繪制圖形。你的淘寶年度消費報告那炫酷的圖表一下子讓人忘了自己花了多少錢，各大門戶網站、媒體都開始大量使用圖表，于是乎又有一批工具等待我們學習的路上什么是D3.js...

songze 2019-08-22 18:44 評論0 收藏0
使用JavaScript和D3.js實現數據可視化

摘要：它的全稱是數據驅動文檔，并且它被稱為一個互動和動態的數據可視化庫網絡。我們將使用文本編輯器和瀏覽器。出于測試目的，建議使用工具來檢查和調試和，例如或。使矩形反映數據目前，我們陣列中的所有矩形沿軸具有相同的位置，并且不代表高度方面的數據。歡迎大家前往騰訊云+社區，獲取更多騰訊海量技術實踐干貨哦~ 本文由獨木橋先生發表于云+社區專欄介紹 D3.js是一個JavaScript庫。它的...

mingde 2019-08-23 10:56 評論0 收藏0
Vs - 基于 d3.js 和 vue.js 的數據可視化

摘要：概述是一個基于和的數據可視化分析包，適用于圖表，制作。目前支持的組件主依賴安裝使用建議使用搭建環境，以下只針對標準環境。圖及其他圖標支持的數據類型請見項目主頁。 Vs 概述 Vs 是一個基于 d3.js 和 vue.js 的數據可視化分析包，適用于圖表，dashboard 制作。 Github Repo 目前支持的組件 d3Bar d3Line d3Pie d3ProgressArc...

Acceml 2019-08-22 16:23 評論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入門

摘要：通過函數可以選擇出沒有關聯任何數據的圖形，可以調用相關函數更新或是刪除。 D3.js入門 1.什么是D3.js？ Data-Driver-Document（數據驅動文檔）：是一個用來使用Web標準做數據可視化的js庫；數據可視化：用交互的/可視化的方式對抽象數據進行展示，已達到數據認知的目的，數據是純粹的的事實，純粹意味著這種事實沒有經過任何處理，而信息是數據處理后的結果，他揭示...

shixinzhang 2019-08-20 16:18 評論0 收藏0
使用D3.js構建實時圖形

摘要：在本教程中，我們將探討如何使用和構建實時圖形。通過方法監聽輪詢更新，并在收到更新后使用最新數據調用函數，以便重新呈現圖形。首先你需要在計算機上安裝Node和npm。數據的可視化表示是傳遞復雜信息的最有效手段之一，D3.js提供了創建這些數據可視化的強大工具和靈活性。 D3.js是一個JavaScript庫，用于使用SVG，HTML和CSS在Web瀏覽器中生成動態的交互式數據可視化。...

Ryan_Li 2019-08-23 11:31 評論0 收藏0