html 일부
스크립트 태그 추가해야하는데 기억안나
<div id="skewt-logp"> </div>
js
var count3 = 3000,
data3 = [],
margin3 = {top: 14, right: 12, bottom: 10, left: 47},
width3 = 436, //- margin.left - margin.right,
height3 = 346; //- margin.top - margin.bottom;
var xScale3 = d3.scale.linear()
.domain([15, 35])
.range([0, width3]);
var yScale3 = d3.scale.linear()
.domain([3.00432, 2.9777])
.range([height3, 0]);
var lineGenerator3 = d3.svg.line()
.x(function(d, i) { return xScale3(d.x); })
.y(function(d, i) { return yScale3(d.y); });
var svg3 = d3.select("#skewt-logp").append("svg")
.attr("width", width3 + margin3.left + margin3.right)
.attr("height", height3 + margin3.top + margin3.bottom)
.append("g")
.attr("transform", "translate(" + margin3.left + "," + margin3.top + ")");
svg3.append("defs").append("clipPath")
.attr("id", "clip3")
.append("rect")
.attr("width", width3)
.attr("height", height3);
svg3.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + yScale3(3) + ")")
.call(d3.svg.axis().scale(xScale3).orient("bottom"))
.append("text") // x축 이름 추가
.attr("class", "axis-label")
.attr("x", width3/1.15)
.attr("y", 30)
.text("T");
svg3.append("g")
.attr("class", "y axis")
.call(d3.svg.axis().scale(yScale3).orient("left"))
.append("text") // y축 이름 추가
.attr("class", "axis-label")
.attr("transform", "rotate(-90)")
.attr("x", -height3 / 1.8)
.attr("y", -30)
.text("log P");
var path3 = svg3.append("g")
.attr("clip-path", "url(#clip3)")
.append("path")
.attr("class", "line");
skewt logp 그래프에 데이터 push
var newData3 = { x: modify_obj['t'], y: Math.log(modify_obj['at'])/Math.log(10) };
data3.push(newData3);
path3.datum(data3)
.attr("d", lineGenerator3);
svg3.select(".x.axis")
.transition()
.duration(50)
.ease("linear")
.call(d3.svg.axis().scale(xScale3).orient("bottom"));
데이터 많을 때 shift쓰기
배열 앞부분 데이터 제거
if (data3.length > 2000) {
data3.shift();
}