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实时折线图

1 个答案: