Обновление графика с новыми данными

Question

Довольно неожиданно для d3.js, так что есть что-то очевидное, что мне не хватает. Смотрели этот код снова и снова, не уверен, где это происходит.

У меня есть барграф, который отображает 28 баров. Я пытаюсь:

1. Реплицируйте это tutorial, где новые данные добавляются в график, а самые старые данные удаляются.
2. Вместо того чтобы использовать shift для удаления данных, я хотел бы нажать на график/массив, но отображать только последние 28 чисел. Я бы хотел использовать весь массив для другого отображения. Это сказало, я не могу заставить выше работать.

Это jsFiddle для беспокойства.

У меня есть график, расположенный внутри группы (с уникальным идентификатором, # 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(); 
};