在d3js中绘制散点图的示例

Question

我有一套大约1000个点，我想用d3js来分散图。我希望每隔一秒钟就有大约10分的时间出现。在某个地方有这样的简单例子吗？d3js教程是详细的，但是我似乎找不到适合这个案例的教程。

Answer 1

• http://alignedleft.com/tutorials/d3/making-a-scatterplot/和http://bl.ocks.org/bunkat/2595950 ->this示例为您提供了如何绘制散点图的基本概念！
• http://swizec.com/blog/quick-scatterplot-tutorial-for-d3-js/swizec/5337 ->教程 你得先理解这些！
• scatterplot--->http://jsfiddle.net/eaGhB/3/中用于动画的演示小提琴 var w= 960，h= 500，节点= []；var svg =d3。选择(“body”).append(“svg:svg”).attr(“宽度”，w) .attr(“高”，h)；var force = d3.layout.force() .charge(-300) .size(w，h) .nodes(节点).on(“抽签”，滴答) .start()；函数蜱(){svg.selectAll(“圆”) .attr("cx"，函数(d) {返回d.x；} .attr("cy"，函数(d) {返回d.y；})；} var区间=setInterval(函数() { var d={ x: W/2+2* Math.random()-1，y: h/2+2* Math.random() -1 }；Svg.append(“svg:循环”) .data(d) .attr("r"，10) .transition() .ease(Math.sqrt) .style(“行程”，“灰色”).style(“填充”，“红色”) .attr("r"，10)；如果(nodes.push(d) > 20) {clearInterval(区间)；d3.selectAll(‘循环’).on(“mouseover”，动画).on(“mouseout”)，函数() {d3.选择(This).transition() .duration(100) .attr("r"，40)；.style(“填充”，“黑”)；}；} force.stop() force.start()；}，200；函数动画(){ d3.select(this).transition() .duration(300) .attr("r"，20)；选择(This).style(“fill”，"green")；var sel =d3.选择(This)；sel.moveToFront ()；}；d3.selection.prototype.moveToFront = function () {返回this.each(函数(){ this.parentNode.appendChild(this)；})；}；

- [https://github.com/mbostock/d3/wiki/Gallery--](https://github.com/mbostock/d3/wiki/Gallery--)>these are many example that you can refer too.

​