D3.js 그래프의 연속 그리기

7501 단어 d3.js
D3.js를 이용하여 그래프의 연속 묘화를 실시합니다.



주기적으로 타이머를 시작하고 배열에 난수를 추가하여 그래프를 다시 그립니다.
배열의 크기가 상한에 도달했을 때, 선두의 배열을 삭제합니다.

sample.html
<html>
<head>
    <meta charset = "utf-8">
    <title>D3.js</title>
</head>

<body>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<div id="d3graph" style="border:1px solid #ccc; margin-bottom:10px"></div>

<script type="text/javascript">
var stage;
$(document).ready(function() {
    stage = d3.select("#d3graph").append("svg:svg").attr("width", $("#d3graph").width()).attr("height", 300);
    setInterval("update()",100);
});

var colors = d3.scale.category10();
var d3Line = d3.svg.line()
.x(function(d,i){return i * 10})
.y(function(d,i){return d});

var points = new Array();

function update() {
    points.push(Math.random() * 100 + 100);
    if(points.length > $("#d3graph").width()/10) {
        points.shift();
    }

    // 削除する
    stage.selectAll("path").remove();

    // 描画する
    stage.append("path")
    .attr("d", d3Line(points))
    .attr("stroke", colors(0))
    .attr("fill", "none")
    .attr("opacity", 1);

}
</script>

</body>
</html>

WebSocket과 결합하면 센서 정보를 실시간으로 그릴 수 있습니다.
C3.js 산점도의 X축에 문자열 표시
웹에 『단켄보쿠노마치』 같은 지도를 만드는 기초편

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage