成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

Karuru / 2094人閱讀

摘要：本片記錄坐標(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 + line + text元素組成的，如下圖

path表示的是底部坐標(biāo)軸（不包括內(nèi)部刻度），如下

這部分通過d描繪，在d3中稱為outer tick


g容器則包括了text和line作為inner tick

line即線，text即文字

d3實(shí)現(xiàn)坐標(biāo)軸主要步驟

步驟主要如下：

創(chuàng)建scale（比例尺）

創(chuàng)建axis（坐標(biāo)軸，是個函數(shù)）

selection.call(axis)創(chuàng)建坐標(biāo)軸

小實(shí)驗 數(shù)據(jù)與寬高 
const data = [1, 10, 20];
let svgWidth = 400,
    svgHeight = 400;

小實(shí)驗都用這些數(shù)據(jù)啦

最簡單的坐標(biāo)軸 
/**
 * 創(chuàng)建scale
 */
let scale = d3.scaleLinear()
    .domain([0, d3.max(data)]) //輸入域
    .range([0, 200]); //輸出域，這里可理解為坐標(biāo)軸長度范圍
/**
 * 創(chuàng)建axis
 */
let axis = d3.axisTop(scale); //創(chuàng)建坐標(biāo)軸，除此之外還有axisLeft，axisBottom，axisRight，區(qū)別在于tick（刻度）的朝向
/**
 * 插入
 */
d3.select("body")
    .append("svg")
    .attr("width", svgWidth)
    .attr("height", svgHeight)
    .append("g")//需要放在g容器里
    .attr("transform", "translate(10,20)")
    .call(axis);//創(chuàng)建坐標(biāo)軸

坐標(biāo)軸的長度來源于比例尺的range
最大值來源于d3.max(data)
200(range) / 20(最大值) = 10段
20(最大值） / 10段 = 2
所以坐標(biāo)軸如是顯示

僅顯示所需的刻度的坐標(biāo)軸

上一個坐標(biāo)軸顯示了平均的刻度，但是有時這不是我們想要的，我們可以使用axis.tickValues()顯示需要的刻度
僅需在axis后增加api即可

let axis = d3.axisTop(scale).tickValues(data);

設(shè)置刻度長短

也是使用axis.tickSize()即可，為方便觀察，這里使用axisBottom坐標(biāo)軸

let axis = d3.axisBottom(scale).tickValues(data).tickSize(200);

設(shè)置樣式

其實(shí)設(shè)置樣式就是對其中的svg設(shè)置，原理類似dom操作，選擇svg元素，改變樣式

舉個簡單的例子

d3.select("body")
    .append("svg")
    .attr("width", svgWidth)
    .attr("height", svgHeight)
    .append("g")
    .attr("transform", "translate(10, 20)")
    .call(axis)
    .selectAll("path").attr("stroke", "pink").attr("stroke-width", "5");

最后對g中的path進(jìn)行賦樣式

總結(jié)

組合好不同的API會有更多效果！

參考資料

d3.js直方圖與坐標(biāo)軸基礎(chǔ)
d3.js API
selection.call()
d3中的axis.ticks詳解

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

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

相關(guān)文章

  • 交互式數(shù)據(jù)可視化－D3.js（三）比例尺

    摘要：設(shè)置為，則所有超出值域范圍的值，都會被收縮到值域之內(nèi)。指數(shù)比例尺相對線性比例尺多出一個用于指定指數(shù)。這段代碼中相當(dāng)于定義一個線性比例尺。使用量子比例尺后定義域?qū)⒈环殖蛇@段，分別對應(yīng)值域的個值。 線性比例尺 線性比例尺是常用比例尺常用方法有： var linear = d3.scaleLinear() - 創(chuàng)建一個定量的線性比例尺. linear.domain([numbers]) - ...

    huhud 評論0 收藏0

  • 交互式數(shù)據(jù)可視化－D3.js（三）比例尺

    摘要：設(shè)置為，則所有超出值域范圍的值，都會被收縮到值域之內(nèi)。指數(shù)比例尺相對線性比例尺多出一個用于指定指數(shù)。這段代碼中相當(dāng)于定義一個線性比例尺。使用量子比例尺后定義域?qū)⒈环殖蛇@段，分別對應(yīng)值域的個值。 線性比例尺 線性比例尺是常用比例尺常用方法有： var linear = d3.scaleLinear() - 創(chuàng)建一個定量的線性比例尺. linear.domain([numbers]) - ...

    graf 評論0 收藏0

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

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

    zzzmh 評論0 收藏0

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

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

    ygyooo 評論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 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<