Question

我正在尝试一次渲染大约150个d3线图，但渲染所有图形大约需要30秒，而浏览器在此期间无法使用。

数据是股票价格，图表上的每个点由价格和时间戳定义。图形看起来类似于这里找到的图形：https://finviz.com/futures.ashx - 这个页面渲染得很好，但它们有1/3的图形要渲染，它们的数据只是价格，没有时间戳，这是我假设允许的页面渲染如此之快。出于各种原因，我无法用我的数据去掉时间戳。

代码：

$('.d3_chart').each( function() {

  var data = JSON.parse($(this).attr('d3-plot-data'));

  var svg = d3.select(this),
      margin = {top: 0, right: 0, bottom: 0, left: 0},
      width = +svg.attr("width") - margin.left - margin.right,
      height = +svg.attr("height") - margin.top - margin.bottom,
      g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");

  var parseTime = d3.utcParse('%Y-%m-%d %H:%M:%S');

  var x = d3.scaleTime()
      .rangeRound([0, width]);

  var y = d3.scaleLinear()
      .rangeRound([height, 0]);

  var line = d3.line()
      .x(function(d) { return x(parseTime(d[1])); })
      .y(function(d) { return y(d[0]); });

  x.domain(d3.extent(data, function(d) { return parseTime(d[1]); }));
  y.domain(d3.extent(data, function(d) { return d[0]; }));

  g.append("g")
      .attr("transform", "translate(0," + height + ")")
      .call(d3.axisBottom(x))
      .select(".domain")
      .remove();

  g.append("path")
      .datum(data)
      .attr("fill", "none")
      .attr("stroke", "white")
      .attr("stroke-linejoin", "round")
      .attr("stroke-linecap", "round")
      .attr("stroke-width", 1.5)
      .attr("d", line);
});

数据：

[[145.23, "2017-05-26 13:30:19"], [146.24, "2017-05-26 13:31:46"], [146.76, "2017-05-26 13:33:05"], [146.72, "2017-05-26 13:33:05"], etc...]

每个图表包含大约500个价格。

这是我第一次使用d3，我想知道是否有任何我做错的事情会减慢渲染速度，或者我可以改变什么以加快渲染速度，或者如果这样做永远不会像此？

性能问题渲染了100多个d3线图

0 个答案: