Javascript 用新数据更新图形

对d3.js来说是个新手，所以希望我遗漏了一些明显的东西。我已经一遍又一遍地看了这段代码，不确定哪里出了问题

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

复制此操作，将新数据添加到图形中，并删除最旧的数据。 我不想使用shift来删除数据，而是想转到图形/数组，但只显示最后28个数字。我想将整个阵列用于另一个显示。这就是说，我不能让上述工作。 这是对麻烦代码的一种解释

我在一个组中有一个图，它有一个唯一的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个数字的指针，那将非常感谢

JSFIDLE显示了如何在第一次单击时添加新条，但随后的单击仅转换和删除数据，而不添加新条。

将dataChange函数更改为以下将获得新插入，并将整个数组限制为28个元素

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

---

您尚未在updateGraph函数中绑定新数据，因此请在enter之后添加.datakInvd1。我还认为您需要更改.attrx。。。行，这样您就可以在i中添加1。为了只显示数组最后28个条目中的一个条目，您可以使用d3过滤器函数，也可以使用javascript切片来预处理数据。在enter之后添加.datakInvd1会产生错误。我可以更新var kI3dataSelect=d3.selectkI1data.selectAllrect.datakInvd1，函数d{return d；}；参考“kInvd1”。有关于过滤器的帮助吗？如果我移除kInvd1.shift；为了得到一个不断扩展的数组，我希望d3.selectkI1data.selectAllrect.datakInvd1.filterFunction，I{return I>=kInvd1.length-28}；当数组大于28个条目时，将起作用。然而，enter不喜欢它。围绕这一主题阅读可能与索引有关，但我正在努力。。。找你的零钱。在第一次单击时，元素last blue rectangle意外地被删除，并且一旦数组中的所有条目都来自随机函数black，则删除它们时的转换行为与蓝色矩形转换不同。