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
參考
2018/10/17 tick
ticks
tickFromat
tickSize
tickValues
留言列表