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

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

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

d3畫布的基本布局如下圖

實(shí)現(xiàn)過程如下：

先定義畫圖的容器的尺寸

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)

再通過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（）定義輸出范圍

通過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)來的數(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)) //通過d屬性值，添加line_generator函數(shù)
//     // 其實(shí)d就是 path-data 的縮寫，d= "M"

當(dāng)頁面有多個(gè)相同元素，select只能選擇符合條件的第一個(gè)元素，想要選擇其中某一個(gè)指定的元素，可以把那個(gè)元素賦給一個(gè)變量，然后使用變量名去實(shí)現(xiàn) 如下所示，g表示上面賦值的那個(gè)變量g,而不是標(biāo)簽 而selectAll選中的是頁面中所有的元素

g.append("path").attr("d", line_generator(data)) 
//通過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"

沒有縮放的初始圖

加縮放后的效果

縮放代碼：將成比例縮放

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 {
    /*定義畫出的線條無填充，*/
    fill: none;
    /* 線顏色*/
    stroke: brown;
    /*線條粗細(xì)*/
    stroke-width: 2;
}

設(shè)置平滑之后的樣子

代碼：

.interpolate("cardinal") //讓線條變得光滑，不是折線而是光滑的曲線

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

云服務(wù)器 GPU云服務(wù)器畫曲線 d3.js 函數(shù)曲線 python畫曲線 ps怎么畫曲線

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

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

發(fā)表評論

登陸后可評論

0條評論

gxyz

男|高級講師

我要關(guān)注我要私信

TA的文章

C語言進(jìn)階：程序預(yù)處理

閱讀 1833·2021-10-09 09:44
如何控制云主機(jī)-該怎么選擇合適自己的云虛擬主機(jī)？

閱讀 2705·2021-09-22 15:38
【C語言進(jìn)階】C語言實(shí)現(xiàn)通訊錄升級版 { 含動(dòng)態(tài)擴(kuò)容/銷毀/信息保存功能 }（強(qiáng)烈建議收藏食用）

閱讀 2502·2021-09-09 09:33
iNeuOS工業(yè)互聯(lián)平臺(tái)，增加OPC UA驅(qū)動(dòng)，同步和訂閱方式讀取數(shù)據(jù)

閱讀 709·2021-09-07 09:58
題目：基于Java畢設(shè)項(xiàng)目“e博士”高考志愿輔助填報(bào)系統(tǒng)

閱讀 1833·2021-09-02 15:41
css居中總結(jié)

閱讀 2527·2019-08-30 15:55
畢業(yè)后的第一次總結(jié)。

閱讀 1806·2019-08-30 15:55
HTML 分享頁面到QQ/微信、微博等平臺(tái)

閱讀 551·2019-08-30 15:44

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

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

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

實(shí)現(xiàn)過程如下：

x軸縮放

y軸縮放

代碼：

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

相關(guān)文章