d3.js ---畫坐標(biāo)軸

zzzmh 發(fā)布于2019-08-02 15:59 / 560人閱讀

摘要：畫坐標(biāo)軸使用的的方法生成坐標(biāo)軸頁面效果如下這個(gè)時(shí)候軸在頁面的上方，不在我們想要的位置，可以通過設(shè)置屬性將坐標(biāo)軸移到自己想要的位置畫軸效果如下，這個(gè)時(shí)候軸在頁面的上方，不在我們想要的位置，所以要讓軸旋轉(zhuǎn)軸旋轉(zhuǎn)代碼加上旋轉(zhuǎn)后的效果圖如下會(huì)發(fā)現(xiàn)軸

畫坐標(biāo)軸

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

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

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

畫y軸

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

效果如下，這個(gè)時(shí)候x軸在頁面的上方，不在我們想要的位置，所以要讓y軸旋轉(zhuǎn)

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

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

旋轉(zhuǎn)后的效果圖如下：會(huì)發(fā)現(xiàn)y軸的數(shù)值是由大變小而不是由小變大，這是因?yàn)樵谟?jì)算機(jī)頁面中的時(shí)候和幾何數(shù)學(xué)中的坐標(biāo)軸哦的方向是不一樣的

普通數(shù)學(xué)坐標(biāo)系：

計(jì)算機(jī)屏幕坐標(biāo)系

所以旋轉(zhuǎn)后的y軸坐標(biāo)系的值是由大變小而不是由小變大

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

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

發(fā)現(xiàn)這兩個(gè)類控制著坐標(biāo)軸樣式，通過設(shè)置css樣式給坐標(biāo)軸加上刻度

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

到這兒，坐標(biāo)系就畫完了，~

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/54454.html

相關(guān)文章

D3.js數(shù)據(jù)可視化

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

songze 2019-08-22 18:44 評論0 收藏0
使用JavaScript和D3.js實(shí)現(xiàn)數(shù)據(jù)可視化

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

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

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

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

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

yanbingyun1990 2019-08-23 16:18 評論0 收藏0
D3.js入門

摘要：通過函數(shù)可以選擇出沒有關(guān)聯(lián)任何數(shù)據(jù)的圖形，可以調(diào)用相關(guān)函數(shù)更新或是刪除。 D3.js入門 1.什么是D3.js？ Data-Driver-Document（數(shù)據(jù)驅(qū)動(dòng)文檔）：是一個(gè)用來使用Web標(biāo)準(zhǔn)做數(shù)據(jù)可視化的js庫；數(shù)據(jù)可視化：用交互的/可視化的方式對抽象數(shù)據(jù)進(jìn)行展示，已達(dá)到數(shù)據(jù)認(rèn)知的目的，數(shù)據(jù)是純粹的的事實(shí)，純粹意味著這種事實(shí)沒有經(jīng)過任何處理，而信息是數(shù)據(jù)處理后的結(jié)果，他揭示...

shixinzhang 2019-08-20 16:18 評論0 收藏0
使用D3.js構(gòu)建實(shí)時(shí)圖形

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

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