凱開 x 慵懶日子

html 部分

<svg width="900" height="500" id="linechart"></svg>

 

// 設定 svg 大小，margin

let margin = {top: 20, right: 20, bottom: 100, left: 60};

let width = +svg.attr("width") - margin.left - margin.right;

let height = +svg.attr("height") - margin.top - margin.bottom;

 

// x,y 大小

let x = d3.scaleTime().range([0, width]);

let y = d3.scaleLinear().range([height, 0]);

let color = d3.scaleOrdinal(d3.schemeCategory10);//隨機顏色

 

let parseTime = d3.timeParse("%Y-%m-%d %H:%M");//想要的時間形態

2018-06-20 發線上面那行不work耶，改使用timeFormat

let parseDate = d3.timeFormat("%Y-%m-%d");

 

// 最大最小

let array = [1, 2, 3]

d3.min(array); //1

d3.max(array); //3

d3.extent(array);//算出極值[min, max] >> [1, 3]

 

// x,y 計算值區間

x.domain([min, max]);

y.domain([min, max]);

 

// 定義 line

let line = d3.line()

.curve(d3.curveBasis)//圓滑曲線(可不用)

.x(d => x(d.date))

.y(d => y(d.value));

 

// Add the X Axis

svg.append("g")

     .attr("transform", "translate(0," + height + ")")

     .call(d3.axisBottom(x));

 

// Add the X Axis label

 

//在svg增加圖片

我想要增加一個太陽的icon到svg上

let imgs = svg.selectAll("sun.point").data(data);

 

imgs.enter().append("image")

       .attr("xlink:href", "/src/images/sun.png")

       .attr("x","-8")//x軸的位置

       .attr("y","-8")//y軸的位置

       .attr("width", 16)//圖的大小

       .attr("height", 16);//圖的大小

 

//other

.style("font-size", "20px") //文字大小

.style("text-decoration", "underline") //文字有底線

.attr("font-weight", "bold") //文字粗體

.attr("text-anchor", "middle") //對齊屬性，start | middle | end

 

參考

資料轉換技巧 

範例1

範例2

 

2018/10/17 tick

ticks

tickFromat

tickSize

tickValues