D3學(xué)習(xí)筆記：線性圖表

adie 發(fā)布于2019-08-20 15:52 / 3207人閱讀

摘要：稍稍對(duì)上面的代碼改變就能得到面積圖標(biāo)參考使用制作圖表




    
    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")

稍稍對(duì)上面的代碼改變就能得到面積圖標(biāo)

參考

使用D3制作圖表
D3 API Reference

云服務(wù)器 GPU云服務(wù)器學(xué)習(xí)筆記學(xué)習(xí)筆記一基礎(chǔ)學(xué)習(xí)筆記深度學(xué)習(xí)筆記

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

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

相關(guān)文章

D3學(xué)習(xí)筆記：水平柱狀圖表

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

104828720 2019-08-20 15:55 評(píng)論0 收藏0
D3.js可視化前端框架的使用要點(diǎn)

摘要：該事件不會(huì)區(qū)分字母的大小寫，例如和被視為一致。這些布局的作用都是將某種數(shù)據(jù)轉(zhuǎn)換成另一種數(shù)據(jù)，而轉(zhuǎn)換后的數(shù)據(jù)是利于可視化的。而有元素與數(shù)據(jù)對(duì)應(yīng)的部分稱為。 1.安裝

MASAILA 2019-08-22 14:57 評(píng)論0 收藏0
11個(gè)React Native 組件庫(kù)和 Javascript 數(shù)據(jù)可視化庫(kù)

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

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

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

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

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

Null 2019-08-21 17:56 評(píng)論0 收藏0