Question

d3.js相当新，所以希望有一些我很想念的东西。一直在看这个代码，不知道哪里出错了。

我有一个条形图，显示28个条形图。我想：

复制此tutorial，其中新数据已添加到图表中，并删除最旧的数据。
我不想使用shift来删除数据，而是想推送到图形/数组，但只显示最后28个数字。我想将整个数组用于另一个显示器。这说，我无法完成上述工作。

这是麻烦代码的jsFiddle。

我有一个位于一个组内的图表（具有唯一ID，＃kI1data，计划稍后有多个图表）。单击该组时，将移动数据数组中的值，然后推送另一个值。然后重绘图形。我相信这是重绘功能导致问题;它会删除矩形，但在第一次点击后不会添加任何新矩形。

graphGroup.append("g")
    .attr("id", "kInv1")
    .append("rect")
    .attr("class", "invBack")
    .attr("x", 0).attr("y", 0)
    .attr("width", kI1width).attr("height", kI1height)
    .attr("fill", "grey")
    .on("click", dataChange); // Add/remove data, and update graph  

function dataChange() {

    kInvd1.shift();
    kInvd1.push(30); // 30 a placeholder number
    updateGraph();  

};

function updateGraph() {

    // Select the group containing the rectangles that need updating
    // (to avoid selecting other rectangles within the svg)
    var kI3dataSelect = d3.select("#kI1data").selectAll("rect").data(kInvd1, function(d) { return d; });    

    // Enter new data
    kI3dataSelect.enter().append("rect")
        .attr("x", function(d, i) { return 1 + ((i+1) * ((kI1width)/28)); })
        .attr("y", function(d) { return ykI1(d); })
        .attr("height", function(d) { return (kI1height) - ykI1(d); })
        .attr("width", (kI1width)/28)
        .attr("fill", "black");

    // Update positions (shift one bar left)
    kI3dataSelect
        .transition().duration(100)
        .attr("x", function(d, i) { return 1 + (i * ((kI1width)/28)); });

    kI3dataSelect.exit()
        .transition().duration(100)
        .attr("x", function(d, i) { return 1 + ((i-1) * ((kI1width)/28)); })
        .remove();

};

现在我只想尝试显示新添加的数据，同时删除最旧的数据。一旦完成，如果有关于如何仅显示数组中最后28个数字的指针，那将非常感激！

jsFiddle显示第一次点击时如何添加新栏，但后续点击只会翻译和删除数据，而不会添加新栏。

Answer 1

将dataChange函数更改为以下内容可获得新的插入，并将所有数组限制为28个元素。

function dataChange() {
  if (kInvd1.length >= 28) kInvd1.shift()
  kInvd1.push(Math.random() * 60); // 30 a placeholder number
  updateGraph();
};

使用新数据更新图表

1 个答案: