d3.js - 对于大数据集和慢速网络，如何增加读取 d3.json 数据的时间？

Question

我正在使用 d3js 和 nvd3.js 绘制散点图。获取和呈现我使用的数据:

  var chart;
  var data;
  var url = window.location+"/data";
  d3.json(url, function(error, json) {
    if (error) return console.warn(error);
      data = json;
      nv.addGraph(function() {
        chart = nv.models.scatterChart()
              .showDistX(true)
              .showDistY(true)
              .useVoronoi(true)
              .color(d3.scale.category10().range())
              .transitionDuration(300); 
        chart.xAxis.tickFormat(d3.format('.001f'));
        chart.yAxis.tickFormat(d3.format('.02f'));
        chart.tooltipContent(function(key){
            var result = '<h2>'+ key + '</h2>';
            return result;
        });
    d3.select('#div2 svg')
        .datum(data)
        .call(chart);
    nv.utils.windowResize(chart.update);
    chart.dispatch.on('stateChange', function(e) { ('New State:', JSON.stringify(e)); });
    return chart;
    });
  });

不幸的是，数据来自的服务器最多需要 2 分钟来呈现所有数据。所以我的函数超时了。如何增加超时值，以便图表实际显示？

Answer 1

首先，2分钟渲染一张图很长。您应该尝试找到一种解决方案以更快地从您的服务器获取数据(例如使用缓存)。

如果您想对数据进行花哨的请求，一个好的方法是求助于jQuery.ajax()。 .此函数提供了一个 timeout 参数，这可能正是您要查找的参数。

你最终会得到这样的东西:

function handleSuccess(data) {
  nv.addGraph(function() {
    chart = nv.models.scatterChart()
          .showDistX(true)
          .showDistY(true)
          .useVoronoi(true)
          .color(d3.scale.category10().range())
          .transitionDuration(300); 
    chart.xAxis.tickFormat(d3.format('.001f'));
    chart.yAxis.tickFormat(d3.format('.02f'));
    chart.tooltipContent(function(key){
        var result = '<h2>'+ key + '</h2>';
        return result;
    });
    d3.select('#div2 svg')
      .datum(data)
      .call(chart);
    nv.utils.windowResize(chart.update);
    chart.dispatch.on('stateChange', function(e) { ('New State:', JSON.stringify(e)); });
    return chart;
  });
}
handleError: function(error) {
  return console.warn(error);
}

$.ajax({
  url: url,
  type: 'GET',
  timeout: 3000, // in milliseconds
  dataType: 'json'
  success: handleSuccess, 
  error: handleError
})

您还可以查看 request documentation page在 d3.这个答案也可以帮助:https://stackoverflow.com/a/17320249/1041692