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

wqj97 發(fā)布于2019-08-21 17:56 / 3123人閱讀

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

d3畫布的基本布局如下圖

實現(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元素，為了比較select和selectAll

d3.select("svg").append("g")//添加第一個g
var g = d3.select("svg")
    .append("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ù)進行縮放，因為是線性的所以使用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()實現(xiàn)line_generator函數(shù)

var line_generator = d3.svg.line()
    .x(function(d, i) { return scale_x(i); }) //x坐標點的值為data數(shù)組的下標，參數(shù)d表示傳進來的數(shù)據(jù)，i表示下標
    .y(function(d) { return scale_y(d) }) //y坐標的值為數(shù)組中實際的每一項的值
    .interpolate("cardinal") //讓線條變得光滑，不是折線而是光滑的曲線

// d3.select("g")
//     .append("path")
//     .attr("d", line_generator(data)) //通過d屬性值，添加line_generator函數(shù)
//     // 其實d就是 path-data 的縮寫，d= "M"

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

g.append("path").attr("d", line_generator(data)) 
//通過d屬性值，添加line_generator函數(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ù)進行縮放，因為是線性的所以使用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;
    /*線條粗細*/
    stroke-width: 2;
}

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

代碼：

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

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

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

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

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

發(fā)表評論

登陸后可評論

0條評論

wqj97

男|高級講師

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

TA的文章

基于LinuxBoot的云固件創(chuàng)新實踐_云技術(shù)

閱讀 2781·2021-10-14 09:42
uniapp 的基礎(chǔ)

閱讀 839·2021-10-11 10:57
為什么沒有 `<style src="">`

閱讀 785·2019-08-30 15:54
微信小程序教學(xué)第二章（含視頻）：小程序中級實戰(zhàn)教程之預(yù)備篇 - 封裝網(wǎng)絡(luò)請求及 mock 數(shù)據(jù)

閱讀 1927·2019-08-30 13:50
vertical-align 簡明指南

閱讀 1693·2019-08-30 11:19
php項目—個人博客

閱讀 943·2019-08-29 12:38
JS錯誤監(jiān)控總結(jié)

閱讀 1436·2019-08-26 11:51
深度理解Promise--Promise的特點和方法詳解

閱讀 1402·2019-08-26 10:48

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

資訊專欄INFORMATION COLUMN

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

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

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

x軸縮放

y軸縮放

代碼：

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

相關(guān)文章