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