d3.js에서 정기적으로 데이터 세트를 읽고 svg를 다시 표시합니다.

15834 단어 d3.js자바스크립트
비망이 됩니다.

remove 처리를 넣지 않으면, 쭉쭈쭈쭉 도형이 검게 갑니다. .
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Line Chart</title>
    <style>
        svg {
            width: 380px;
            height: 240px;
            border: 1px solid skyblue;
        }
        .line {
            fill: none;
            stroke: black;
        }
        .axis text {
            font-family: sans-serif;
            font-size: 11px;
        }
        .axis path,
        .alis line {
            fill: none;
            stroke: black;
        }
        .axis_x line {
            fill: none;
            stroke: black;
        }
    </style>
    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
</head>

<body>
    <h1>Line Chart</h1>
    <svg id="myGraph"></svg>
    <script src="js/line_chart.js"></script>
</body>

</html>

line_chart.js
var svgWidth = 320;
var svgHeight = 240;
var offsetX = 30;
var offsetY = 20;
var scale = 2.0;
var dataSet1 = [10, 47, 65, 8, 64, 99, 75, 22, 63, 80];
var dataSet2 = [10, 48, 67, 18, 74, 20, 80, 22, 63, 80];
var margin = svgWidth / (dataSet1.length - 1);

var t = 0;
var x = 0;
var yScale = d3.scale.linear()
    .domain([0, 100])
    .range([scale * 100, 0])

d3.select("#myGraph")
    .append("g")
    .attr("class", "axis")
    .attr("transform", "translate(" + offsetX + ", " + offsetY + ")")
    .call(
        d3.svg.axis()
        .scale(yScale)
        .orient("left")
    )

d3.select("#myGraph")
    .append("rect")
    .attr("class", "axis_x")
    .attr("width", svgWidth)
    .attr("height", 1)
    .attr("transform", "translate(" + offsetX + ", " + (svgHeight - offsetY - 0.5) + ")")

function draw(dataSet) {
    var line = d3.svg.line()
        .x(function(d, i) {
            return offsetX + i * margin;
        })
        .y(function(d, i) {
            return svgHeight - (d * scale) - offsetY;
        })
        .interpolate("basis")

    var lineElements = d3.selectAll("#myGraph")
        .append("path")
        .attr("class", "line")
        .attr("d", line(dataSet))
}

d3.timer(function() {
    if (t > 1.0) {
        console.log(t);
        t = 0
        x += 1;

        if (x % 2 == 0) {
            d3.selectAll("path").remove();
            draw(dataSet1)

        } else {
            d3.selectAll("path").remove();
            draw(dataSet2)
        }
    }

    t += 0.02;

아래와 같은 그림이 번갈아 반복됩니다. 오.

라인 차트를 표시하는 라이브러리를 만들었다 (d3.js 의존)
d3sparql.js를 사용해 보았습니다.

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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