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
})

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

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

1 个答案: