使用setInterval更新d3.js数据，而不是xAxis标签更新

Question

我做了一个类似于this one的D3JS示例，但不是用按钮更新数据，而是用setInterval更新它，因为我每15分钟收到一个不同的JSON。

出于这个原因，我每15秒寻找一个新的JSON。我在JSFidle上做了一个简单的例子here，它使用setInterval并更新信息（如果存在）。更新数据的功能是“D3JS_Update_fig”：

// Update figure data (http://bl.ocks.org/d3noob/7030f35b72de721622b8)
function D3JS_Update_fig(timestamp) {

    //var timestamp = json.meta.timestamp;
    //var dataA = json.data.dataA;
    //var dataB = json.data.dataB;
    var dataA_line = d3.select("#dataA").data()[0];
    var dataB_line = d3.select("#dataB").data()[0];


    var t_ini = new Date(new Number(parseInt((timestamp)*1000)));
    var t_fin = new Date(new Number(parseInt((timestamp + 3600)*1000)));

    D3JS_xscale = d3.time.scale().domain([t_ini,t_fin]).range([0,SAFIP_width]);
    D3JS_lower_x_Axis.scale(D3JS_xscale);

    dataA_line.forEach(function(array,index){
      array.value = Math.sin(parseInt((timestamp + index*60)*1000));
      array.time = new Date(new Number(parseInt((timestamp + index*60)*1000)));
    });
    dataB_line.forEach(function(array,index){
      array.value = Math.sin(parseInt((timestamp + index*60)*1000))*0.5;
      array.time = new Date(new Number(parseInt((timestamp + index*60)*1000)));
    });

    // Select the section we want to apply our changes to
    d3.select("#dataA.line")
          .transition()
          .duration(750)
          .attr("d", D3JS_line_function(dataA_line));

    d3.select("#dataB.line")
          .transition()
          .duration(750)
          .attr("d", D3JS_line_function(dataB_line));

    d3.select(".x.axis")
          .transition()
          .duration(750)
          .call(D3JS_lower_x_Axis);
}

正确更新数据和时间变量，并按预期更新绘制的线条。正如您在下图中看到的那样，数据对应于每个15分钟的间隔（我使用带有时间戳的Math.sin函数来模拟随机种子，每次更新时数据都是连贯的）。

问题是虽然正确更新了行（y值和时间），但xAxis刻度标签不会更新。在我之前提到的示例（here）中，标签已更新，我正在做类似的事情，所以我没有在代码上找到问题。

变量名可能有问题吗？也许是jQuery的错误ID？我不知道......

Answer 1

似乎大多数情况都是正确的，但也有必要通过以下方式在X轴上更新以下功能：

d3.select("#D3JS_graph_plot #lower_x_axis")
  .transition()
  .duration(750)
  .call(D3JS_lower_x_Axis)
  .selectAll("text")
     .style("text-anchor", "end")
     .attr("dx", "-0.3em")
     .attr("dy", "0.9em")
     .attr("transform", function(d) {
         return "rotate(-35)"
  });

其中#lower_x_axis是svg lower x Axis的id属性（JSfiddle示例中的第124行），＃D3JS_graph_plot是示例中名为“selector”的图形的id。