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

我正在尝试制作一个d3实时折线图，在数据点有圆圈。 但是，圆圈聚集在左侧，不提供给数据点

这种方法适用于静态数据用折线图显示圆

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

但是，它不能处理动态增加的数据。 我想用实时在线聊天来移动圈子

以下代码是从此URL派生的

请告诉我如何更改代码好吗

    <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>

var数据=[]；
var宽度=500；
var高度=500；
var globalX=0；
var持续时间=100；
var max=500；
var阶跃=10；
var图表=d3。选择（“#图表”）
.attr（'宽度'，宽度+50）
.attr（'高度'，高度+50）；
var x=d3.scaleLinear（）.domain（[0500]）.range（[0500]）；
var y=d3.scaleLinear（）.domain（[0500]）.range（[500,0]）；
// -----------------------------------
var line=d3.line（）
.x（函数（d）{返回x（d.x）；}）
.y（函数（d）{返回y（d.y）；}）；
var smoothLine=d3.line（）.curve（d3.curveCardinal）
.x（函数（d）{返回x（d.x）；}）
.y（函数（d）{返回y（d.y）；}）；
// -----------------------------------
//画轴
var xAxis=d3.axisBottom（）.scale（x）；
var axix=chart.append（'g'）.attr（'class'，'x axis'））
.attr（'transform'，'translate（0500）'
.呼叫（xAxis）；
var path=chart.append（'path'）；
var circle=chart.append（'circle'）；
//主回路
函数tick（）{
//生成新数据
变量点={
x:globalX，
y:（（Math.random（）*450+50）>>0）
};
数据推送（点）；
globalX+=阶跃；
//划清界线
路径基准（数据）
.attr（'类'，'平滑线'）
.attr（'d'，平滑线）；
//附加圆。　它应该提供给数据点
chart.append（'circle'））
.数据（数据）
.attr（'class'，'ciecle'）
.attr（“cy”，line.x（））
.attr（“cy”，line.y（））
.attr（“r”，5）
.attr（“填充”、“蓝色”）；
//将图表向左移动
x、 域（[globalX-（最大步长），globalX]）；
axix.transition（）
.持续时间（持续时间）
.ease（d3.easeLinear，.1）
.呼叫（xAxis）；
attr（'transform'，null）
.transition（）
.持续时间（持续时间）
.ease（d3.easeLinear，.1）
.attr（'transform'，'translate（'+x（globalX-max）+'））；
//循序渐进
circle.attr（'transform'，null）
.transition（）
.持续时间（持续时间）
.ease（d3.easeLinear，.1）
.attr（'transform'，'translate（'+x（globalX-max）+'））
.在（'结束'，勾选）；
//远程旧数据（最多50分）
如果（data.length>50）data.shift（）；
}
勾选（）；

使用

path.datum（data）

在

勾选

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

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

要使变换平滑，还需要在每个记号中更新变换。您可以分别为每个圆和路径本身更新它，但我只是将它们放在一个组（

）元素中，并为整个组设置动画。下面是一个工作示例：

---

使用

path.datum（data）

在

勾选

函数中反复更新路径坐标（该函数反复调用自身）。您还需要使用调整（移动）的比例更新每个刻度上圆圈的位置，该比例在此处更改：

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

要使变换平滑，还需要在每个记号中更新变换。您可以分别为每个圆和路径本身更新它，但我只是将它们放在一个组（

）元素中，并为整个组设置动画。下面是一个工作示例：