Javascript 性能问题渲染100+；d3线图

我试图一次渲染大约150个d3线条图，但渲染所有图形大约需要30秒，而浏览器在这段时间内不可用

数据是股票价格，图形上的每个点由价格和时间戳定义。图看起来与这里的图相似：--这个页面呈现得很好，但是它们有1/3的图要呈现，它们的数据只是价格，没有时间戳，这就是我假设的允许页面如此快速地呈现的。由于各种原因，我无法用数据去除时间戳

代码：

数据：

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

---

这是我第一次使用d3，我想知道是否有什么地方我做错了，导致渲染速度变慢，或者我可以更改任何东西来加快渲染速度，或者这永远不会像这样工作？

为什么您的数据存储在dom中？这似乎是错误的。此外，您的图表是否共享相同的维度/域？如果是这样的话，您可以重用这些比例，而不是重新计算每个循环。dom是最简单的测试方法。单独的JSON请求将是一种改进，但我认为这不会加快任何速度？是的，维度/域将非常相似，可以重用，我一定会尝试这样做。“单独的JSON请求将是一种改进，但我认为这不会加快任何速度”。。。你错了，进步将是巨大的。除此之外，混合使用D3和jQuery是一个糟糕的主意。好吧，我会试试的，谢谢！

$('.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...]