最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - D3 Scatterplot with thousands of data points - Stack Overflow

programmeradmin1浏览0评论

I would like to make a scatter plot using D3 with the ability of only looking at a small section at a time using some sort of slider across the x-axis. Is there a method in javascript where I can efficiently buffer the data and quickly access the elements as the user scrolls left or right?

My goal is similar to this protovis example here, but with 10 times the amount of data. This example chokes when I make that many data points.

I would like to make a scatter plot using D3 with the ability of only looking at a small section at a time using some sort of slider across the x-axis. Is there a method in javascript where I can efficiently buffer the data and quickly access the elements as the user scrolls left or right?

My goal is similar to this protovis example here, but with 10 times the amount of data. This example chokes when I make that many data points.

Share Improve this question asked Dec 7, 2012 at 2:18 dvreed77dvreed77 2,3872 gold badges30 silver badges49 bronze badges
Add a ment  | 

1 Answer 1

Reset to default 8

I have done a scatterplot with around 10k points where I needed to filter sections of the plot interactively. I share a series of tips that worked for me, which I hope some may hopefully help you too:

  • Use a key function for your .data() operator as it is done at the end of this tutorial. The advantage of using keys is that you do not need to update elements that do not change.
  • Not related to d3, but I divided my data space into a grid, so that each data point is associated to a single cell (in other words each cell is an index to a set of points). In this way, when I needed to access from, let's say, from x_0 to x_1, I knew what cells I needed, and hence I could access a much more refined set of possible data points (avoiding iterating along all points).
  • Avoid transitions: from my personal experiences the .transition() is not very smooth when thousand of SVG elements are selected (it may be better now in newer versions or with faster processors)
  • In my case it was more convenient to make points invisible (.attr("display","none")) or visible rather than removing and creating SVG elements (I wonder if this is more time efficient too)
发布评论

评论列表(0)

  1. 暂无评论