亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

d3學(xué)習(xí)day1----畫曲線

gxyz / 3260人閱讀

摘要：畫布的基本布局如下圖實(shí)現(xiàn)過(guò)程如下先定義畫圖的容器的尺寸定義元素設(shè)置再通過(guò)添加一個(gè)元素，這段代碼添加了兩個(gè)元素，為了比較和添加第一個(gè)添加第二個(gè)，并把這個(gè)元素賦值給變量定義要畫的曲線的數(shù)組將成比例縮放軸縮放使用中的函數(shù)進(jìn)行縮放，因?yàn)槭蔷€

d3畫布的基本布局如下圖

實(shí)現(xiàn)過(guò)程如下：
先定義畫圖的容器的尺寸 
var width = 500,
    height = 200,
    margin = { left: 50, top: 30, right: 20, bottom: 20 },
    g_width = width - margin.left - margin.right,
    g_height = height - margin.top - margin.bottom;
定義svg元素 
var svg = d3.select("#container")
    .append("svg")
    // 設(shè)置width,height
    .attr("width", width) //attribute
    .attr("height", height)
再通過(guò)append()添加一個(gè)g元素，這段代碼添加了兩個(gè)g元素，為了比較select和selectAll 
d3.select("svg").append("g")//添加第一個(gè)g
var g = d3.select("svg")
    .append("g") //添加第二個(gè)g，并把這個(gè)元素賦值給變量g
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
    //定義要畫的曲線的數(shù)組data[]
var data = [2, 12, 3, 4, 5, 6, 22]
將g成比例縮放
x軸縮放
var scale_x = d3.scale.linear() //使用d3中的scale函數(shù)進(jìn)行縮放，因?yàn)槭蔷€性的所以使用linear
    .domain([0, data.length - 1]) //domain定義輸入范圍
    .range([0, g_width]) //range（）定義輸出范圍
y軸縮放
var scale_y = d3.scale.linear()
    .domain([0, d3.max(data)]) //domain定義輸入范圍
    .range([0, g_height]) //range（）定義輸出范圍
通過(guò)d3下面的svg下面的line()實(shí)現(xiàn)line_generator函數(shù) 
var line_generator = d3.svg.line()
    .x(function(d, i) { return scale_x(i); }) //x坐標(biāo)點(diǎn)的值為data數(shù)組的下標(biāo)，參數(shù)d表示傳進(jìn)來(lái)的數(shù)據(jù)，i表示下標(biāo)
    .y(function(d) { return scale_y(d) }) //y坐標(biāo)的值為數(shù)組中實(shí)際的每一項(xiàng)的值
    .interpolate("cardinal") //讓線條變得光滑，不是折線而是光滑的曲線

// d3.select("g")
//     .append("path")
//     .attr("d", line_generator(data)) //通過(guò)d屬性值，添加line_generator函數(shù)
//     // 其實(shí)d就是 path-data 的縮寫，d= "M"
當(dāng)頁(yè)面有多個(gè)相同元素，select只能選擇符合條件的第一個(gè)元素，想要選擇其中某一個(gè)指定的元素，可以把那個(gè)元素賦給一個(gè)變量，然后使用變量名去實(shí)現(xiàn) 如下所示，g表示上面賦值的那個(gè)變量g,而不是標(biāo)簽 而selectAll選中的是頁(yè)面中所有的元素 
g.append("path").attr("d", line_generator(data)) 
//通過(guò)d屬性值，添加line_generator函數(shù)
// 其實(shí)d就是 path-data 的縮寫，d= "M0,2Q0.7999999999999999,11.9,1,12C1.3,12.15,1.7,4.2,2,3S2.7,3.7,3,4S3.7,4.7,4,5S4.7,3.4499999999999997,5,6Q5.2,7.7,6,22"
沒(méi)有縮放的初始圖

加縮放后的效果

縮放代碼：將成比例縮放 
var scale_x = d3.scale.linear() //使用d3中的scale函數(shù)進(jìn)行縮放，因?yàn)槭蔷€性的所以使用linear
    .domain([0, data.length - 1]) //domain定義輸入范圍
    .range([0, g_width]) //range（）定義輸出范圍

var scale_y = d3.scale.linear()
    .domain([0, d3.max(data)]) //domain定義輸入范圍
    .range([0, g_height]) //range（）定義輸出范圍
給path設(shè)置css后的樣子

css代碼： 
path {
    /*定義畫出的線條無(wú)填充，*/
    fill: none;
    /* 線顏色*/
    stroke: brown;
    /*線條粗細(xì)*/
    stroke-width: 2;
}
設(shè)置平滑之后的樣子
代碼：
.interpolate("cardinal") //讓線條變得光滑，不是折線而是光滑的曲線

由此，d3畫線就已經(jīng)完成了，接下來(lái)就要畫坐標(biāo)系，請(qǐng)參考下篇文章，~~~

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/54455.html

相關(guān)文章

  • d3學(xué)習(xí)day1----畫曲線

    摘要：畫布的基本布局如下圖實(shí)現(xiàn)過(guò)程如下先定義畫圖的容器的尺寸定義元素設(shè)置再通過(guò)添加一個(gè)元素，這段代碼添加了兩個(gè)元素，為了比較和添加第一個(gè)添加第二個(gè)，并把這個(gè)元素賦值給變量定義要畫的曲線的數(shù)組將成比例縮放軸縮放使用中的函數(shù)進(jìn)行縮放，因?yàn)槭蔷€ d3畫布的基本布局如下圖 showImg(https://segmentfault.com/img/bVZMKl?w=759&h=410); 實(shí)現(xiàn)過(guò)程如下...

    wqj97 評(píng)論0 收藏0

  • 用canvas繪制一個(gè)曲線動(dòng)畫——深入理解貝塞爾曲線

    摘要：實(shí)現(xiàn)這樣一個(gè)曲線動(dòng)畫可以點(diǎn)擊這里查看在線演示在寫代碼之前，先了解一下什么是貝塞爾曲線吧。繪制二次貝賽爾曲線路徑這樣就完成了基本的繪制二次貝塞爾曲線的方法了。 我的github博客地址 https://github.com/hujiulong/... 前言 在前端開發(fā)中，貝賽爾曲線無(wú)處不在： 它可以用來(lái)繪制曲線，在svg和canvas中，原生提供的曲線繪制都是使用貝賽爾曲線 它也可以...

    xiaowugui666 評(píng)論0 收藏0

  • 對(duì)web數(shù)據(jù)可視化的一些理解

    摘要：本人也做過(guò)一些數(shù)據(jù)可視化相關(guān)的產(chǎn)品，下面聊聊對(duì)數(shù)據(jù)可視化的一些思考。這也是數(shù)據(jù)可視化最麻煩的一直，一般我們借助的地圖，或者百度地圖，高德地圖等來(lái)開發(fā)，其實(shí)百度地圖也出了個(gè)地圖可視化的庫(kù)，展示效果沒(méi)有好。。。。 最近幾年隨著大數(shù)據(jù)的興起，以及瀏覽器性能的提升，數(shù)據(jù)可視化成為了一個(gè)熱點(diǎn)，前端也冒出來(lái)了很多數(shù)據(jù)可視化的崗位。本人也做過(guò)一些數(shù)據(jù)可視化相關(guān)的產(chǎn)品，下面聊聊對(duì)數(shù)據(jù)可視化的一些思考。...

    andong777 評(píng)論0 收藏0

  • 對(duì)web數(shù)據(jù)可視化的一些理解

    摘要：本人也做過(guò)一些數(shù)據(jù)可視化相關(guān)的產(chǎn)品，下面聊聊對(duì)數(shù)據(jù)可視化的一些思考。這也是數(shù)據(jù)可視化最麻煩的一直，一般我們借助的地圖，或者百度地圖，高德地圖等來(lái)開發(fā)，其實(shí)百度地圖也出了個(gè)地圖可視化的庫(kù)，展示效果沒(méi)有好。。。。 最近幾年隨著大數(shù)據(jù)的興起，以及瀏覽器性能的提升，數(shù)據(jù)可視化成為了一個(gè)熱點(diǎn)，前端也冒出來(lái)了很多數(shù)據(jù)可視化的崗位。本人也做過(guò)一些數(shù)據(jù)可視化相關(guān)的產(chǎn)品，下面聊聊對(duì)數(shù)據(jù)可視化的一些思考。...

    gotham 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<