d3學習day1----畫曲線

wqj97 發布于2019-08-21 17:56 / 3122人閱讀

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

d3畫布的基本布局如下圖

實現過程如下：

先定義畫圖的容器的尺寸

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")
    // 設置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 + ")")
    //定義要畫的曲線的數組data[]
var data = [2, 12, 3, 4, 5, 6, 22]

將g成比例縮放

x軸縮放

var scale_x = d3.scale.linear() //使用d3中的scale函數進行縮放，因為是線性的所以使用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()實現line_generator函數

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

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

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

g.append("path").attr("d", line_generator(data)) 
//通過d屬性值，添加line_generator函數
// 其實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函數進行縮放，因為是線性的所以使用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設置css后的樣子

css代碼：

path {
    /*定義畫出的線條無填充，*/
    fill: none;
    /* 線顏色*/
    stroke: brown;
    /*線條粗細*/
    stroke-width: 2;
}

設置平滑之后的樣子

代碼：

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

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

GPU云服務器云服務器畫曲線 d3.js 函數曲線 python畫曲線 ps怎么畫曲線

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/90238.html

d3學習day1----畫曲線

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

gxyz 2019-08-02 15:59 評論0 收藏0
用canvas繪制一個曲線動畫——深入理解貝塞爾曲線

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

xiaowugui666 2019-08-21 18:35 評論0 收藏0
對web數據可視化的一些理解

摘要：本人也做過一些數據可視化相關的產品，下面聊聊對數據可視化的一些思考。這也是數據可視化最麻煩的一直，一般我們借助的地圖，或者百度地圖，高德地圖等來開發，其實百度地圖也出了個地圖可視化的庫，展示效果沒有好。。。。最近幾年隨著大數據的興起，以及瀏覽器性能的提升，數據可視化成為了一個熱點，前端也冒出來了很多數據可視化的崗位。本人也做過一些數據可視化相關的產品，下面聊聊對數據可視化的一些思考。...

andong777 2019-08-20 16:28 評論0 收藏0
對web數據可視化的一些理解

摘要：本人也做過一些數據可視化相關的產品，下面聊聊對數據可視化的一些思考。這也是數據可視化最麻煩的一直，一般我們借助的地圖，或者百度地圖，高德地圖等來開發，其實百度地圖也出了個地圖可視化的庫，展示效果沒有好。。。。最近幾年隨著大數據的興起，以及瀏覽器性能的提升，數據可視化成為了一個熱點，前端也冒出來了很多數據可視化的崗位。本人也做過一些數據可視化相關的產品，下面聊聊對數據可視化的一些思考。...

gotham 2019-08-01 16:48 評論0 收藏0