d3.js 带圆圈的实时折线图

Question

我正在尝试制作一个在数据点处带有圆圈的 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>

Answer 1

路径的坐标在 tick 函数（重复调用自身）中使用 path.datum(data) 重复更新。您还需要使用调整后的（移动的）比例更新每个刻度上的圆圈位置，此处已更改：

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

为了使过渡平滑，您还需要更新每个刻度中的变换。您可以为每个圆圈和路径本身单独更新它，但我只是将两者放在一个组 (<g>) 元素中并为整个组设置动画。这是一个工作示例：

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

d3.js 带圆圈的实时折线图

d3.js realtime line chart with circle

javascript

linechart

d3.js