Question

我第一次尝试使用d3，并且我正在尝试了解如何创建动态d3折线图，每当我从服务器收到带有新数据点的websocket消息时需要更新。

我在angular指令链接函数中有以下代码：

var data = [];
var margin = { top: 30, right: 20, bottom: 30, left: 50 },
    width = 600 - margin.left - margin.right,
    height = 270 - 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");

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

var valueline = d3.svg.line()
    .x(function (d) { return x(d['label']); })
    .y(function (d) { return y(d['value']); });

var svg = d3.select(elem[0])
    .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 + ")");


svg.append("path")
    .attr("class", "line")
    .attr("d", valueline(data));


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

svg.append("g")
    .attr("class", "y axis")
    .call(yAxis);

Statistics.listen('topic', function(message) {
    data.push({
        label: message.webEvent.creationTimeStamp,
        value: +message.webEvent.value
    });

    x.domain(d3.extent(data, function (d) { return d.label; }));
    y.domain([
        d3.min(data, function(d) { return d.value; }),
        d3.max(data, function(d) { return d.value; })
    ]);

    var svg = d3.select(elem[0]).transition();

    svg.select(".line")   // change the line
        .duration(0)
        .attr("d", valueline(data));
    svg.select(".x.axis") // change the x axis
        .duration(0)
        .call(xAxis);
    svg.select(".y.axis") // change the y axis
        .duration(0)
        .call(yAxis);
}

我不确定“持续时间”的目的是什么。消息不会定期通过套接字。所以我不确定是否应该设置一个静态持续时间值，我假设根据给定的数字刷新图形。我希望图表在我得到更新时更新。随着时间的推移，图表看起来应该像正在运行的正弦波。

现在，第一个来的数据会被渲染。但是，即使我可以看到websocket上的传入消息并且数据阵列正在增长，图形仍保持静态。

我错过了什么？非常感谢任何帮助。

如何使用来自websocket的数据创建带有d3的动态折线图？

0 个答案: