如何修复更改浏览器选项卡时不同步的可视化

How to fix viz that is getting out of sync when I change browser tabs?

本文关键字：同步可视化选项何修复浏览器更新时间：2023-09-26

我正在使用这个jsFiddle作为模板，我注意到当我更改浏览器选项卡并更改回来时，图形不同步（彩色线不移动，但x轴移动）。

我可以在 d3 中添加什么内容，以便在我更改浏览器选项卡然后更改回可视化选项卡时移动可视化项的行和时间轴？完整代码如下：

<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
    <title>Live Pressure Data</title>
    <style>
        svg {
            font: 12px sans-serif;
        }
        .line {
            fill: none;
            stroke: black;
            stroke-width: 1.5px;
        }
        .axis path,
        .axis line {
            fill: none;
            stroke: #000;
            shape-rendering: crispEdges;
        }
        .y.axis path {
            display: none;
        }
        .y.axis line {
            stroke: #777;
            stroke-dasharray: 2px,2px;
        }
        .grid .tick {
            stroke: lightgrey;
            opacity: 0.7;
        }
        .grid path {
            stroke-width: 0;
        }
    </style>
    <script src="http://d3js.org/d3.v3.js" charset="utf-8"></script>
    <!--<script src="/socket.io/socket.io.js"></script>-->
</head>
<body>
    <script>
        var n = 120;
        var nSensors = 4;
        var duration = 1000;
        var now = new Date(Date.now() - duration);
        // 1 x nSensors array of zeros
        var count = d3.range(nSensors).map(function () {
            return 0;
        });
        // nSensors x n array of zeros
        var data = count.map(function () {
            return d3.range(n).map(function () {
                return 0;
            });
        });
        var margin = { top: 20, right: 10, bottom: 20, left: 20 };
        var width = 800 - margin.right - margin.left;
        var height = 300 - margin.top - margin.bottom;
        var x = d3.time.scale()
                       .domain([now - (n - 2) * duration, now - duration])
                       .range([0, width]);
        var y = d3.scale.linear()
                        .domain([0, 100])
                        .range([height, 0]);
        var line = d3.svg.line()
                         .interpolate("basis")
                         .x(function (d, i) { return x(now - (n - 1 - i) * duration); })
                         .y(function (d, i) { return y(d); });
        var color = d3.scale.category10();
        var svg = d3.select("body").append("svg")
                    .attr("class", "lineChart")
                    .attr("width", width + margin.left + margin.right)
                    .attr("height", height + margin.top + margin.bottom)
                    .append("g")
                    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
        svg.append("defs").append("clipPath")
           .attr("id", "clip")
           .append("rect")
           .attr("width", width)
           .attr("height", height);
        var yAxis = d3.svg.axis()
                          .scale(y)
                          .tickSize(width)
                          .orient("right")
        var gy = svg.append("g")
                    .attr("class", "y axis")
                    .call(yAxis)
        gy.selectAll("text")
          .attr("text-anchor", "end")
          .attr("x", 4)
          .attr("dy", -4)
        var xAxis = svg.append("g")
                       .attr("class", "x axis")
                       .attr("transform", "translate(0," + height + ")")
                       .call(x.axis = d3.svg.axis().scale(x).orient("bottom"));
        var clipPath = svg.append("g")
                          .attr("clip-path", "url(#clip)");
        var paths = clipPath.append("g")
        for (var series in data) {
            paths.append("path")
                 .attr("class", "line")
                 .data([data[series]])
                 .style("stroke", color(series))
        }
        // Live bar graph
        var barW = 300 - margin.left - margin.right;
        var barH = 190 - margin.top - margin.bottom;
        var rectH = 28;
        var barX = d3.scale.linear()
                               .domain([0, 100])
                               .range([0, barW]);
        var barSvg = d3.select("body").append("svg")
                       .attr("class", "barChart")
                       .attr("width", barW + margin.right + margin.left)
                       .attr("height", barH + margin.top + margin.bottom)
                       .append("g")
                       .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
        barSvg.selectAll("rect")
              .data(count)
              .enter().append("rect")
              .attr("y", function (d, i) { return i * 38; })
              .attr("width", barX)
              .style("fill", function (d, i) { return color(i); })
              .attr("height", rectH);
        barSvg.selectAll("text")
              .data(count)
              .enter().append("text")
              .attr("x", 50)
              .attr("y", function (d, i) { return (i * 38) + 14 })
              .attr("dy", "0.35em")
              .attr("text-anchor", "end")
              .text(function (d) { return d + " psi" })
        barSvg.append("g")
              .attr("class", "x axis")
              .attr("transform", "translate(0," + barH + ")")
              .call(d3.svg.axis().scale(barX).orient("bottom"))
        // Live data
        //var socket = io.connect('');
        //socket.on('news', function (pressure) {
        //    oldCount = count;
        //    count = pressure.values;
        //})
        setInterval(function () {
            for (var series in count) {
                count[series] += (Math.random() - 0.5) * 5;
                count[series] = Math.min(Math.max(count[series], 0), 100);
            }
        }, 900);

        // Animate
        tick();
        function tick() {
            // update the domains
            now = new Date();
            x.domain([now - (n - 2) * duration, now - duration]);
            for (var series in data) {
                data[series].push(count[series]);
            }
            // slide the x-axis left
            xAxis.transition()
                 .duration(duration)
                 .ease("linear")
                 .call(x.axis);
            // redraw the line
            svg.selectAll(".line")
               .attr("d", line)
            // slide the line left
            paths.attr("transform", null)
                 .transition()
                 .duration(duration)
                 .ease("linear")
                 .attr("transform", "translate(" + x(now - (n - 1) * duration) + ")")
                 .each("end", tick);
            // pop the old data point off the front
            for (var series in data) {
                data[series].shift();
            }
            // bar animation
            barSvg.selectAll("rect")
                  .data(count)
                  .transition()
                  .duration(duration)
                  .attr("width", barX);
            barSvg.selectAll("text")
                  .data(count)
                  .text(function (d) { return Math.floor(d) + " psi" })
        }
    </script>
</body>
</html>

你们的过渡正在互相蹂躏。

如果您查看此处示例的源代码，您会注意到tick函数中的这一行很奇怪：

function tick() {
    transition = transition.each(function() {
    ...

根据文档：

如果未指定 type，则其行为类似于 selection。each：立即为中的每个元素调用指定的函数当前转换，传入当前基准面 D 和索引 I，使用当前 DOM 元素的 this 上下文。创建的任何过渡在转换范围内。每个转换参数都将继承转换参数从父转换，包括 ID、延迟、持续时间和缓动。因此，在过渡中创建的过渡。每个过渡都不会中断父过渡，类似于子过渡。
转换
。每个方法都可用于链接转换并应用跨一组转换的共享计时。

[粗体矿]

将其应用于您的示例似乎可以解决您的问题。

请注意，我不得不更改您的paths变量。在我完成过渡后，当包含在外部g元素中时，它不再是平滑过渡。