D3學習筆記：線性圖表

adie 發布于2019-08-20 15:52 / 3192人閱讀

摘要：稍稍對上面的代碼改變就能得到面積圖標參考使用制作圖表




    
    linechart

#container{
    background: #ffffd;
    width: 500px;
    height: 250px;
}

path{
    fill:none;
    stroke:steelblue;
    stroke-width:3;
}

text{
    fill:black;
}

.domain,.tick{
    stroke:gray;
    stroke-width:1;

}

//width,height
var width =500,
height =250,
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")
.attr("width",width)
.attr("height",height)

var g = d3.select("svg").append("g").attr("transform","translate("+margin.left+","+margin.top+")")



var data = [1,3,5,7,8,4,3,7]
var scale_x = d3.scaleLinear().domain([0,data.length-1]).range([0,g_width])

var scale_y = d3.scaleLinear().domain([0,d3.max(data)]).range([g_height,0])


var line_generator = d3.line()
.x(function(d,i){return scale_x(i);})//0,1,2,3...
.y(function(d){return scale_y(d);})//1,3,5
.curve(d3.curveCardinal)

g.append("path").attr("d",line_generator(data))


var x_axis =d3.axisBottom(scale_x),
y_axis =d3.axisLeft(scale_y);


g.append("g").call(x_axis).attr("transform","translate(0,"+g_height+")")
g.append("g").call(y_axis).append("text").text("Price($)").attr("transform","rotate(-90)").attr("text-anchor","end").attr("dy","2em")

稍稍對上面的代碼改變就能得到面積圖標

參考

使用D3制作圖表
D3 API Reference

GPU云服務器云服務器學習筆記學習筆記一基礎學習筆記深度學習筆記

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

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

D3學習筆記：水平柱狀圖表

摘要：方法用于對選中的結果集綁定數據。方法和方法表示由于此時元素還不存在，必須根據數據的個數將它們創造出來。方法和方法的參數是函數，表示函數的運行結果就是設置網頁元素的值用效果代碼注意版本版本參考柱狀圖例子 github倉庫戳這里鏡心的小樹屋不用svg showImg(https://segmentfault.com/img/bVQRyc?w=1453&h=326); ...

104828720 2019-08-20 15:55 評論0 收藏0
D3.js可視化前端框架的使用要點

摘要：該事件不會區分字母的大小寫，例如和被視為一致。這些布局的作用都是將某種數據轉換成另一種數據，而轉換后的數據是利于可視化的。而有元素與數據對應的部分稱為。 1.安裝

MASAILA 2019-08-22 14:57 評論0 收藏0
11個React Native 組件庫和 Javascript 數據可視化庫

摘要：數據可視化庫超過的的可能是最流行和最廣泛的數據可視化庫。是一組組件，用于高效地渲染大型列表和表格數據。一種優雅而靈活的方式，可以利用組件來支持實際的數據可視化。想閱讀更多優質文章請猛戳GitHub博客,一年百來篇優質文章等著你！ React Native 組件庫 1. NativeBase showImg(https://segmentfault.com/img/bVbrLHH?w=...

tangr206 2019-08-23 17:11 評論0 收藏0
d3.js ----面積圖表

摘要：設置坐標軸樣式，將線性圖標的下段代碼中的改為坐標點的值為數組的下標，參數表示傳進來的數據，表示下標表示軸表示實際曲線上的值讓線條變得光滑，不是折線而是光滑的曲線當頁面有多個相同元素，只能選擇符合條件的第一個元素，想要選擇其中某一個指定的元素 d3設置坐標軸樣式，將線性圖標的下段代碼中的line改為area var area_generator = d3.svg.area() ...

jemygraw 2019-08-02 15:59 評論0 收藏0
d3.js ----面積圖表

摘要：設置坐標軸樣式，將線性圖標的下段代碼中的改為坐標點的值為數組的下標，參數表示傳進來的數據，表示下標表示軸表示實際曲線上的值讓線條變得光滑，不是折線而是光滑的曲線當頁面有多個相同元素，只能選擇符合條件的第一個元素，想要選擇其中某一個指定的元素 d3設置坐標軸樣式，將線性圖標的下段代碼中的line改為area var area_generator = d3.svg.area() ...

Null 2019-08-21 17:56 評論0 收藏0