JS Skew-t Log-p 그리기

서주·2023년 7월 11일

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();
  }

0개의 댓글