Линейный график в реальном времени с кругом d3.js - PullRequest
Новая
       9

Линейный график в реальном времени с кругом d3.js

0 голосов
/ 20 января 2019

Я пытаюсь создать линейную диаграмму в реальном времени d3 с кружком в точке данных.Тем не менее, круги собраны на левой стороне, и они не передаются точке данных.

Этот метод подходит для статических данных, чтобы показать круги с линейной диаграммой. 

    chart.append('circle')
        .data(data)
        .attr('class', 'ciecle')
        .attr("cy", line.x())
        .attr("cy", line.y())
        .attr("r", 5)
        .attr("fill", 'blue');

Однако,он не работает с динамически увеличивающимися данными.Я хочу перемещать круги с помощью линейного чата в реальном времени.

Следующий код был разветвлен с этого URL http://bl.ocks.org/KevinGutowski/131809cc7bcd1d37e10ca37b89da9630

Не могли бы вы разрешить мне изменить код? 

    <svg id="chart"></svg>
    <script src="http://d3js.org/d3.v4.min.js"></script>
    <script>
        var data = [];
        var width = 500;
        var height = 500;
        var globalX = 0;
        var duration = 100;
        var max = 500;
        var step = 10;
        var chart = d3.select('#chart')
        .attr('width', width + 50)
        .attr('height', height + 50);
        var x = d3.scaleLinear().domain([0, 500]).range([0, 500]);
        var y = d3.scaleLinear().domain([0, 500]).range([500, 0]);
        // -----------------------------------
        var line = d3.line()
                            .x(function(d){ return x(d.x); })
                            .y(function(d){ return y(d.y); });
        var smoothLine = d3.line().curve(d3.curveCardinal)
                            .x(function(d){ return x(d.x); })
                            .y(function(d){ return y(d.y); });
        // -----------------------------------
        // Draw the axis
        var xAxis = d3.axisBottom().scale(x);
        var axisX = chart.append('g').attr('class', 'x axis')
                     .attr('transform', 'translate(0, 500)')
                     .call(xAxis);

        var path = chart.append('path');
        var circle = chart.append('circle');

        // Main loop
        function tick() {
            // Generate new data
            var point = {
                x: globalX,
                y: ((Math.random() * 450 + 50) >> 0)
            };
            data.push(point);
            globalX += step;
            // Draw new line
            path.datum(data)
                .attr('class', 'smoothline')
                .attr('d', smoothLine);
// Append circles. 　It should given to data point
            chart.append('circle')
                .data(data)
                .attr('class', 'ciecle')
                .attr("cy", line.x())
                .attr("cy", line.y())
                .attr("r", 5)
                .attr("fill", 'blue');

            // Shift the chart left
            x.domain([globalX - (max - step), globalX]);
            axisX.transition()
                 .duration(duration)
                 .ease(d3.easeLinear,.1)
                 .call(xAxis);
            path.attr('transform', null)
                .transition()
                .duration(duration)
                .ease(d3.easeLinear,.1)
                .attr('transform', 'translate(' + x(globalX - max) + ')');
 //move with line           
circle.attr('transform', null)
                .transition()
                .duration(duration)
                .ease(d3.easeLinear,.1)
                .attr('transform', 'translate(' + x(globalX - max) + ')')
                .on('end', tick);
            // Remote old data (max 50 points)
            if (data.length > 50) data.shift();
        }
        tick();
    </script>

1 Ответ

0 голосов
/ 20 января 2019

Координаты пути многократно обновляются в функции tick (которая многократно вызывает себя), используя path.datum(data).Вам также необходимо обновлять расположение кругов на каждом тике, используя скорректированную (смещенную) шкалу, которая изменяется здесь: 

x.domain([globalX - (max - step), globalX]);

Чтобы сделать переходы плавными, вам также необходимо обновить преобразования в каждомпоставить галочку.Вы можете обновить его для каждого круга и самого пути в отдельности, но я просто поместил оба элемента в группу (<g>) и анимировал всю группу.Вот рабочий пример:

http://bl.ocks.org/Sohalt/9715be30ba57e00f2275d49247fa7118/43a24a4dfa44738a58788d05230407294ab7a348

...