0

d3.js 相当新，所以希望我缺少一些明显的东西。一直在看这段代码，不知道哪里出错了。

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

  1. 复制本教程，将新数据添加到图形中，并删除最旧的数据。
  2. 我不想使用 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 显示了如何在第一次单击时添加新栏，但后续单击仅翻译和删除数据，而不会添加新栏。

4

1 回答 1

0

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

function dataChange() {
  if (kInvd1.length >= 28) kInvd1.shift()
  kInvd1.push(Math.random() * 60); // 30 a placeholder number
  updateGraph();
};
于 2013-09-17T21:29:22.857 回答