FIDDLE <>

我正在尝试在 d3 中创建一个实时(实时更新)时间序列图表，该图表也可以平移(在 X 中)和缩放。理想情况下，我想要的功能是，如果线的最右侧部分对用户可见，那么当新数据添加到图形时，它会自动横向平移以包含新数据(不更改轴刻度)。

我的 d3.json() 请求应该返回如下所示的 JSON 数组:

[{"timestamp":1399325270,"value":-0.0029460209892230222598710528},{"timestamp":1399325271,"value":-0.0029460209892230222598710528},{"timestamp":1399325279,"value":-0.0029460209892230222598710528},....]

当页面首次加载时，我发出请求并获取到目前为止的所有可用日期，然后绘制图表 - 很简单。以下代码执行此操作，它还允许平移(在 X 中)和缩放。

var globalData;
var lastUpdateTime = "0";
var dataIntervals = 1;

var margin = { top: 20, right: 20, bottom: 30, left: 50 },
    width = document.getElementById("chartArea").offsetWidth - margin.left - margin.right,
    height = document.getElementById("chartArea").offsetHeight - margin.top - margin.bottom;

var x = d3.time.scale()
    .range([0, width]);

var y = d3.scale.linear()
    .range([height, 0]);

var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom")
    .ticks(10)
    .tickFormat(d3.time.format('%X'))
    .tickSize(1);
    //.tickPadding(8);

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left");

var valueline = d3.svg.line()
    .x(function (d) { return x(d.timestamp); })
    .y(function (d) { return y(d.value); });

var zoom = d3.behavior.zoom()
    .x(x)
    .y(y)
    .scaleExtent([1, 4])
    .on("zoom", zoomed);

var svg = d3.select("#chartArea")
    .append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
    .call(zoom);

svg.append("rect")
    .attr("width", width)
    .attr("height", height)
    .attr("class", "plot"); // ????

var clip = svg.append("clipPath")
    .attr("id", "clip")
    .append("rect")
    .attr("x", 0)
    .attr("y", 0)
    .attr("width", width)
    .attr("height", height);

var chartBody = svg.append("g")
    .attr("clip-path", "url(#clip)");

svg.append("g")         // Add the X Axis
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis);

svg.append("g")         // Add the Y Axis
    .attr("class", "y axis")
    .call(yAxis);

svg.append("text")
    .attr("transform", "rotate(-90)")
    .attr("y", 0 - margin.left)
    .attr("x", (0 - (height / 2)))
    .attr("dy", "1em")
    .style("text-anchor", "middle")
    .text("Return (%)");

// plot the original data by retrieving everything from time 0
d3.json("/performance/benchmark/date/0/interval/" + dataIntervals, function (error, data) {
    data.forEach(function (d) {

        lastUpdateTime = String(d.timestamp); // this will be called until the last element and so will have the value of the last element
        d.timestamp = new Date(d.timestamp);
        d.value = d.value * 100;

    });

    globalData = data;

    x.domain(d3.extent(globalData, function (d) { return d.timestamp; }));
    y.domain(d3.extent(globalData, function (d) { return d.value; }));

    chartBody.append("path")        // Add the valueline path
        .datum(globalData)
        .attr("class", "line")
        .attr("d", valueline);

    var inter = setInterval(function () {
        updateData();
    }, 5000);

});

var panMeasure = 0;
var oldScale = 1;
function zoomed() {
    //onsole.log(d3.event);
    d3.event.translate[1] = 0;
    svg.select(".x.axis").call(xAxis);

    if (Math.abs(oldScale - d3.event.scale) > 1e-5) {
        oldScale = d3.event.scale;
        svg.select(".y.axis").call(yAxis);
    }

    svg.select("path.line").attr("transform", "translate(" + d3.event.translate[0] + ",0)scale(" + d3.event.scale + ", 1)");
    panMeasure = d3.event.translate[0];

}

在下面的代码块中，我发出了一个 http 请求以获取所有新数据并将其添加到图表中。这很好用。现在我只需要整理新数据的平移逻辑 - 我想它会放在这里:

var dx = 0;
function updateData() {

    var newData = [];

        d3.json("/performance/benchmark/date/" + lastUpdateTime + "/interval/" + dataIntervals, function (error, data) {
            data.forEach(function (d) {

                lastUpdateTime = String(d.timestamp); // must be called before its converted to Date()
                d.timestamp = new Date(d.timestamp);
                d.value = d.value * 100;

                globalData.push(d);
                newData.push(d);

            });

            // panMeasure would be some measure of how much the user has panned (ie if the right-most part of the graph is still visible to the user.
            if (panMeasure <= 0) { // add the new data and pan

                x1 = newData[0].timestamp;
                x2 = newData[newData.length - 1].timestamp;
                dx = dx + (x(x1) - x(x2)); // dx needs to be cummulative

                d3.select("path")
                    .datum(globalData)
                    .attr("class", "line")
                    .attr("d", valueline(globalData))
                .transition()
                    .ease("linear")
                    .attr("transform", "translate(" + String(dx) + ")");

            }

            else { // otherwise - just add the new data 
                d3.select("path")
                    .datum(globalData)
                    .attr("class", "line")
                    .attr("d", valueline(globalData));
            }

            svg.select(".x.axis").call(xAxis);

        });
}

我正在尝试做的(我想这就是我应该做的)是获取新数据的时间值范围(即 newData[] 数组的第一个值和最后一个值之间的差值，将其转换为像素，然后使用该数字平移线条。

这似乎有点工作，但仅限于第一次更新。另一个问题是，如果我在尝试更新数据时使用鼠标进行任何平移/缩放，则该行会消失并且不一定会在下一次更新时返回。对于您可以在代码中发现的潜在错误和/或应该如何完成的一些反馈，我将不胜感激。谢谢。

更新 1:

好的，我已经弄清楚自动平移的问题所在了。我意识到平移向量需要有一个来自某个来源的累积值，所以一旦我做了 dx 累积 (dx = dx + (x(x2) - x(x1)); 然后横向平移在添加新数据时开始工作。

更新 2:

我现在包含了一个 fiddle这接近于我期望数据被检索和绘制的实际方式。它似乎在某种程度上按照我想要的方式工作，除了:

1. X 轴刻度线不会随着新数据平移
2. 当我进行手动平移时，第一次平移的行为变得有点奇怪(向后跳了一点)
3. 如果在尝试添加新数据时我正在平移/缩放 - 该行消失(“多线程”问题？:S)

最佳答案

您可以保存一个包含所有值的全局数组，而不是绘制整个数据并剪掉不必要的部分，每次您需要更新图形时，您只需对这些值进行切片。 然后您可以更轻松地重新计算您的 x 轴和值。缺点是您无法轻松进行过渡。

因此，您将有两个变量:

var globalOffset = 0;
var panOffset = 0;

globalOffset 会在您每次填充新值时更新，panOffset 会在您每次平移时更新。 然后你只需在绘图之前切片你的数据:

var offset = Math.max(0, globalOffset + panOffset);
var graphData = globalData.slice(offset, offset + 100);

参见 fiddle以获得完整的解决方案。

关于javascript - D3.JS 时序折线图，带实时数据，可平移缩放，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23843775/